Jquery插件validate使用一则
jquery.validate是一个基于jquery的非常优秀的验证框架，可以通过它迅速验证一些常见的输入，并且可以自己扩充自己的验证方法。
主要功能有：
验证url，email，number，length，require等。
默认校验规则：
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期 日期校验ie6出错，慎用
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
validate安装：
下载validation，官网地址 http://jqueryvalidation.org/ 获得最新版本的js文件。
导入js库：
Html结构例如
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery validation plug-in - main demo</title> <script type="text/javascript" src="jquery-1.7.2.js"> </script> <script type="text/javascript" src="jquery.validate.min.js"> </script> <script type="text/javascript" src="base.js"> </script> </head> <body> <h1>validate测试</h1> <form method="get" action="" id="form1"> <p> <label for="cname"> 用户名 </label> <input name="cname" type="text" class="required" minlength="2"/> </p> <p> <label for="cemail"> E-Mail </label> <input type="email" name="cemail" class="required email"/> </p> <p> <label for="curl"> URL </label> <input type="text" name="curl" class="url" /> </p> <p> <label for="password"> 密码 </label> <input type="password" id="password" name="password" /> </p> <p> <label for="confirm_password"> 确认密码 </label> <input type="password" name="confirm_password" /> </p> <p> <label for="ccomment"> 自定义 </label> <input type="text" name="comment" /> </p> <p> <input class="submit" type="submit" value="Submit"/> </p> </form> </body> </html>
将校验写在Js代码中：
例如
jQuery.extend(jQuery.validator.messages, { required: "必选字段", remote: "请修正该字段", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 (ISO).", number: "请输入合法的数字", digits: "只能输入整数", creditcard: "请输入合法的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入拥有合法后缀名的字符串", maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"), minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"), rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"), range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), max: jQuery.validator.format("请输入一个最大为{0} 的值"), min: jQuery.validator.format("请输入一个最小为{0} 的值") }); //自定义校验规则 jQuery.validator.addMethod("mobileNum", function(value, element){ return this.optional(element) || /^((13[456789])|(15[012789])|(18[2378]))\d{8}$/.test(value); }); $(function(){ $("#form1").validate({ errorElement: "span",// 使用"div"标签标记错误， 默认:"label" wrapper: "div",// 使用"li"标签再把上边的errorELement包起来 errorClass: "validate-error",// 错误提示的css类名"error" rules: { cname: {// 需要进行验证的输入框name required: true,// 验证条件：必填 minlength: 2// 验证条件：最小长度为2 }, cemail: {// 需要进行验证的输入框name required: true,// 验证条件：必填 email: true// 验证条件：格式为email }, curl: {// 需要进行验证的输入框name required: true,// 验证条件：必填 url: true// 验证条件：格式为url }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, comment: { required: true, number: true, mobileNum: true } }, messages: { cname: { required: "用户名不允许为空!"// 验证未通过的消息 }, cemail: { required: "地址不能为空", email: "输入正确的url" }, curl: { required: "地址不能为空", url: "输入正确的url" }, password: { required: "请输入密码", minlength: "密码的最小长度是{0}个字符" }, confirm_password: { required: "请输入确认密码", minlength: "确认密码的最小长度是{0}个字符", equalTo: "确认密码与密码不相等" }, comment: { required: "不能为空!", mobileNum: "输入数字不符合要求" } }, errorPlacement: function(error, element){ element.parent().append(error); }, submitHandler: function(form){ form.submit(); }, success: function(error, element){ error.remove(); } }) });
将校验规则写到控件中：
例如
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery validation plug-in - main demo</title> <script type="text/javascript" src="jquery-1.7.2.js"> </script> <script type="text/javascript" src="jquery.validate.min.js"> </script> <script> $(function(){ $("#form1").validate(); }) </script> <script type="text/javascript" src="base.js"> </script> </head> <body> <h1>validate测试</h1> <form method="get" action="" id="form1"> <p> <label for="cname"> 用户名 </label> <input name="cname" type="text" class="required" minlength="2"/> </p> <p> <label for="cemail"> E-Mail </label> <input type="email" name="cemail" class="required email"/> </p> <p> <label for="curl"> URL </label> <input type="text" name="curl" class="url" /> </p> <p> <label for="ccomment"> 自定义 </label> <input type="text" name="comment" /> </p> <p> <input class="submit" type="submit" value="Submit"/> </p> </form> </body> </html>
