完整的html结构: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="JQueryValidateDemo.Index" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> </head> <body> <form id="signupForm" runat="server"> <p> <label for="firstname">Firstname</label> <input id="firstname" name="firstname" /> </p> <p> <label for="nickname">NickName</label> <input id="nickname" name="nickname" /> </p> <p> <input type="radio" id="gender_male" value="m" name="gender" /><label for="gender_male">男</label> <input type="radio" id="gender_female" value="f" name="gender"/><label for="gender_female">女</label> </p> <p> <input type="checkbox" id="basketball" name="aihao" />篮球 <input type="checkbox" id="football" name="aihao" />足球 <input type="checkbox" id="pingpang" name="aihao" />乒乓球 </p> <p> <label for="email">E-Mail</label> <input id="email" name="email" /> </p> <p> <select id="jungle" name="jungle" title="请选择任意一种" > <option value="">-请选择-</option> <option value="1">Buga</option> <option value="2">Baga</option> <option value="3">Oi</option> </select> </p> <p> <select id="fruit" name="fruit" title="Please select at least two fruits" multiple="multiple"> <option value="b">Banana</option> <option value="a">Apple</option> <option value="p">Peach</option> <option value="t">Turtle</option> </select> </p> <p> <label for="zipcode">邮政编码</label> <input id="zipcode" name="zipcode" type="text" /> </p> <p> <label for="password">Password</label> <input id="password" name="password" type="password" /> </p> <p> <label for="confirm_password">确认密码</label> <input id="confirm_password" name="confirm_password" type="password" /> </p> <p> <label for="agree">请认真阅读租车协议并同意!</label> <input type="checkbox" id="agree" name="agree" /> </p> <p> <input type="submit" value="Submit"/> </p> </form> </body> </html> 完整js代码: <mce:script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script> <mce:script type="text/javascript" src="js/jquery.validate.js" mce_src="js/jquery.validate.js"></mce:script> <mce:script type="text/javascript" src="js/jquery.metadata.js" mce_src="js/jquery.metadata.js"></mce:script> <mce:script type="text/javascript" src="js/localization/messages_cn.js" mce_src="js/localization/messages_cn.js"></mce:script> <mce:script type="text/javascript"><!-- /** *表单验证代码既可以写入控件中,也可以写在单独的js文件中。 *下面我将表单验证代码都写在js代码中。 *(下面写一个例子,当做熟练JQuery的Validate插件。) */ /** * rules:验证规则 * firstname——表示name值为firstname的控件不能为空( * 如果name值为firstname的控件为radio,表示必须选中某一个; * 如果name值为firstname的控件为checkbox,表示必须选中, * 如果name值为firstname的控件为select,表示必须选中的option值不为空), * 下面的nickname、gender、jungle……同理 * rangelength——表示此控件值的长度范围为6至10个字符。 * remote——ajax验证(服务端只能输出true或者false)。 * minlength——最小长度为2个字符。 * email——表示验证控件格式必须为email格式 * messages——重写错误提示信息。 * * 剩下的自己看代码理解。 * 注意zipcode下面的isZipCode:true,这个验证方法是自定义的,定义方式和引用方式看代码理解。 */ //表单验证代码 $(function() { $("#signupForm").validate({ rules: { firstname: { required: true, rangelength: [6, 10] }, nickname: { required: true, remote: { url: "ajax/IsExistsUserName.aspx", //后台处理程序 type: "post", //数据发送方式 dataType: "json", //接受数据格式 data: { //要传递的数据 username: function() { return $("#nickname").val(); } } } }, gender: { required: true }, jungle: { required: true }, fruit: { required: true, minlength: 2 }, aihao: { required: true, rangelength: [2, 3] }, email: { required: true, email: true }, zipcode: { required: true, isZipCode:true }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: '#password' }, agree: "required" }, messages: { firstname: { required: "用户名不能为空!", rangelength: "用户长度必须在6至10位字符之间(包含)!" }, nickname: { required: "昵称不能为空!", remote: "此用户名已经被注册,请重新填写!" }, gender: "请选择性别!", aihao: { required: "请选择个人爱好!", rangelength: "至少选择两种或以上爱好!" }, email: { required: "邮件地址不能为空!", remote: "请填写真确的电子邮件地址!" }, jungle: { required: "请选择一项(/"请选择/"除外)!" }, fruit: { required: "请选择!", minlength: "至少选择两种!" }, password: { required: "密码不能为空!", minlength: "密码至少5位字符!" }, zipcode: { required: "邮政编码不能为空!" }, confirm_password: { required: "确认密码不能为空!", minlength: "确认密码至少5位字符!", equalTo: "两次密码输入必须一致!" }, agree: "必须同意租车协议!" }, errorPlacement: function(error, element) { error.appendTo(element.parent()); //error.appendTo(element.parent().next().next()); } }); }); //邮政编码验证 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "请正确填写您的邮政编码"); //提交表单 $.validator.setDefaults({ submitHandler: function(form) { alert("验证成功!"); form.submit(); } }); // --></mce:script>