首页 > 代码库 > jquery.validate
jquery.validate
jquery.validate 学习笔记（验证form表单工具）
在网上找了一些资料，很多对表单验证的工具需要指明表单的控件的name 或者 id，就需要自己写JS代码来指明哪些控件需要添加校验，如果页面很多，自己JS的工作量还是比较大的，还不如自己写代码去校验，因此我选择了jquery.validate.js这个工具，它只需要在控件中添加对应的属性就可以了，不需要再写JS代码去指明哪些控件需要校验表单内容。
修改默认提示信息的方法
/* 默认提示信息var messages = { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date (ISO).", dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.", number: "Please enter a valid number.", numberDE: "Bitte geben Sie eine Nummer ein.", digits: "Please enter only digits", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", accept: "Please enter a value with a valid extension.", maxlength: $.validator.format("Please enter no more than {0} characters."), minlength: $.validator.format("Please enter at least {0} characters."), rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), range: $.validator.format("Please enter a value between {0} and {1}."), max: $.validator.format("Please enter a value less than or equal to {0}."), min: $.validator.format("Please enter a value greater than or equal to {0}.")}*/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} 的值") });
自己写的demo,仅仅是在控件端添加属性验证表单内容
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="http://www.mamicode.com/js/util/jquery-1.4.4.js"></script><script type="text/javascript" src="http://www.mamicode.com/js/util/jquery.validate.min.js"></script><title>Insert title here</title></head><body><br><form action="" id="myform"><fieldset> 必须填写：<br> <input type="text" name="a" required><br> <br> minlength="2" maxlength="5" 必须填写，最小长度是2，最大长度是5:(汉字算一个字符)<br> <input id="cname" name="name" minlength="2" minlength="2" maxlength="5" type="text" /><br> <br> rangelength="5,10" 输入的内容长度必须在5-10之间：(汉字算一个字符)<br> <input id="range" name="range" rangelength="5,10" /><br> <br> min="11" max="22" 必须填写，数字最小值为11，最大值为22：<br> <input id="num" name="num" min="11" max="22" type="text" /><br> <br> range="11,22" 必须填写，数字最小值为11，最大值为22：<br> <input id="num1" name="num1" range="11,22" type="text" /><br> <br> equalTo="#mypassword" 两个密码一致校验：<br> mypassword:<input id="mypassword" name="mypassword" type="password" /><br> repassword:<input id="repassword" name="repassword" type="password" equalTo="#mypassword" /><br> <br> number="true" 必须输入合法的数字：必须输入合法的数字(负数，小数) <br> <input id="number" name="number" number="true" /><br> <br> digits="true" 必须输入整数：<br> <input type="text" digits="true" name="integer" id="integer" ><br> <br> email="true" EMAIL：<br> <input type="text" email="true" name="email" id="email" ><br> <br> url="true" URL：（要有http(s)://www）<br> <input type="text" url="true" name="url" id="url" ><br> <br> date="true" DATE日期：(2003/9/9),值校验格式，不会校验里面的数据，因此详细内容还是要自己校验<br> <input type="text" date="true" name="date" id="date" ><br> <br> dateISO="true" dateISO日期：值校验格式，不会校验里面的数据，因此详细内容还是要自己校验<br> <input type="text" dateISO="true" name="dateISO" id="dateISO" ><br> <br> <font color="red">对上传文件格式进行校验：(这个问题还等待解决)</font><br> <input type="file" accept="png|txt" name="accept" id="accept" required><br> <input type="text" accept=".ppp" name="accept1" id="accept1" required><br> <br> <font color="red">备注：表单的id 和 name必须唯一，否则无法正确校验。</font> <input class="submit" type="submit" value="http://www.mamicode.com/Submit"/> </fieldset></form></body></html><script>$(function(){ //指明校验哪个表单，因为一个页面可以有多个表单 $("#myform").validate(); //alert(1);});</script>
上面的例子的确能够快速的校验表单，但是提示信息不够精细，不能够准确的提示用户，因此还有如下方法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://www.mamicode.com/js/util/jquery-1.4.4.js"> </script> <script type="text/javascript" src="http://www.mamicode.com/js/util/jquery.validate.min.js"> </script> <title> Insert title here </title> </head> <body> <br> <!-- 表单校验功能 --> <form class="cmxform" id="signupForm" method="get" action=""> <fieldset> <legend> 字段校验、日历控件完整示例 </legend> <table> <tr> <td> <label for="username"> Username </label> </td> <td> <input id="username" name="username" /> </td> <!-- 这里设置的校验信息显示的地方在下一个td中，可以自行修改 --> <td> </td> </tr> <tr> <td> <label for="password"> Password </label> </td> <td> <input id="password" name="password" type="password" /> </td> <td> </td> </tr> <tr> <td> <label for="confirm_password"> Confirm password </label> </td> <td> <input id="confirm_password" name="confirm_password" type="password" /> </td> <td> </td> </tr> <tr> <td> <label for="sex"> sex </label> </td> <td> 男<input id="sex1" name="sex" type="radio" /> 女 <input id="sex2" name="sex" type="radio" /> </td> <td> </td> </tr> <tr> <td> <label for="email"> Email </label> </td> <td> <input id="email" name="email" /> </td> <td> </td> </tr> <tr> <td> <label for="upload"> Upload </label> </td> <td> <input type="file" name="upload" /> </td> <td> </td> </tr> <tr> <td> <label for="language"> language </label> </td> <td> <input type="checkbox" name="language" value="http://www.mamicode.com/cn" /> 汉语 <input type="checkbox" name="language" value="http://www.mamicode.com/en" /> 英语 <input type="checkbox" name="language" value="http://www.mamicode.com/jp" /> 日语 <input type="checkbox" name="language" value="http://www.mamicode.com/ge" /> 德语 </td> <td> </td> </tr> <tr> <td> <label for="book"> book </label> </td> <td> <select name="book" multiple="multiple"> <option value="http://www.mamicode.com/en"> 英语书 </option> <option value="http://www.mamicode.com/cn"> 汉语书 </option> <option value="http://www.mamicode.com/jp"> 日语书 </option> <option value="http://www.mamicode.com/ge"> 德语书 </option> </select> </td> <td> </td> </tr> <tr> <td> <label for="agree"> 同意该协议 </label> </td> <td> <input type="checkbox" class="checkbox" id="agree" name="agree" /> </td> <td> </td> </tr> <tr> <td> <input class="submit" type="submit" value="http://www.mamicode.com/Submit" /> </td> </tr> </table> </fieldset> </form> </body></html><script> $(document).ready(function() { //通过id查找要进行校验的表单 $("#signupForm").validate({ //设置校验触发的时机,默认全是true。不要尝试去设置它为true，可能会有js错误。 //onsubmit:false, //onfocusout:false, //onkeyup:false, //onclick:false, //验证通过后执行的动作 //success:function(label){ // label.text("ok!").addClass("success"); //}, //手动设置错误信息的显示方式 errorPlacement: function(error, element) { error.appendTo(element.parent().next()); // if ( element.is(":radio") ) // error.appendTo( element.siblings("span") ); // else if ( element.is(":checkbox") ){ // error.appendTo ( element.siblings("span") ); // } // else // error.appendTo( element.parent() ); }, rules: { username: { required: true, rangelength: [5, 7] }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, sex: { required: true }, email: { required: true, email: true }, language: { required: true, rangelength: [2, 3] }, book: { required: true, rangelength: [2, 3] }, agree: "required", upload: { required: true, accept: "flv|jpg" } }, //校验提示信息 messages: { username: { required: "请输入用户名", rangelength: "用户名长度必须为{0}到{1}个字符或汉字" }, password: { required: "请输入密码", minlength: "密码的最小长度是{0}个字符" }, confirm_password: { required: "请输入确认密码", minlength: "确认密码的最小长度是{0}个字符", equalTo: "确认密码与密码不相等" }, email: "请输入正确的邮箱", language: { required: "该项必须填写", rangelength: "请您选择{0}到{1}项语言" }, book: { required: "该项必须选择", rangelength: "请您选择{0}到{1}本书" }, agree: "您没有同意使用协议", upload: { required: "请输入上传文件的路径", accept: "上传文件的格式只能是 flv或jpg" } } }); });</script>
备注：
1、rules对象里面的key是表单的“name”和“id”,这里我们要求name与id对应起来。
2、message与rules对应起来，都是对应表单的名称
3、rules中的required表示是验证内容不能为空，message中的required表示给出内容为空的提示
来自http://www.ylzx8.cn/web/web/992633.html
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。