jquery-validate表单验证
导入js库
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
默认校验规则
| 序号 | 规则 | 描述 |
| 1 | require:true | 必须输入的字段 |
| 2 | remote:"check.php" | 使用ajax方法调用check.php验证入值 |
| 3 | email：true | 必须输入正确格式的电子邮件 |
| 4 | url：true | 必须输入正确格式的网址 |
| 5 | date：true | 必须输入正确格式的日期 |
| 6 | dateISO：true | 必须输入正确格式的日期（ISO） |
| 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 |
使用方式
1.将校验规则写到控件中
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> 6 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> 7 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> 8 <script> 9 $.validator.setDefaults({ 10 submitHandler: function() { 11 alert("提交事件!"); 12 } 13 }); 14 $().ready(function() { 15 $("#commentForm").validate(); 16 }); 17 </script> 18 <style> 19 .error{ 20 color:red; 21 } 22 </style> 23 </head> 24 <body> 25 <form class="cmxform" id="commentForm" method="get" action=""> 26 <fieldset> 27 <legend>输入您的名字，邮箱，URL，备注。</legend> 28 <p> 29 <label for="cname">Name (必需, 最小两个字母)</label> 30 <input id="cname" name="name" minlength="2" type="text" required> 31 </p> 32 <p> 33 <label for="cemail">E-Mail (必需)</label> 34 <input id="cemail" type="email" name="email" required> 35 </p> 36 <p> 37 <label for="curl">URL (可选)</label> 38 <input id="curl" type="url" name="url"> 39 </p> 40 <p> 41 <label for="ccomment">备注 (必需)</label> 42 <textarea id="ccomment" name="comment" required></textarea> 43 </p> 44 <p> 45 <input class="submit" type="submit" value="Submit"> 46 </p> 47 </fieldset> 48 </form> 49 </body> 50 </html>
2.将校验规则写到js代码中
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> 6 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> 7 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> 8 <script> 9 $.validator.setDefaults({ 10 submitHandler: function() { 11 alert("提交事件!"); 12 } 13 }); 14 $().ready(function() { 15 // 在键盘按下并释放及提交后验证提交表单 16 $("#signupForm").validate({ 17 rules: { 18 firstname: "required", 19 lastname: "required", 20 username: { 21 required: true, 22 minlength: 2 23 }, 24 password: { 25 required: true, 26 minlength: 5 27 }, 28 confirm_password: { 29 required: true, 30 minlength: 5, 31 equalTo: "#password" 32 }, 33 email: { 34 required: true, 35 email: true 36 }, 37 "topic[]": { 38 required: "#newsletter:checked", 39 minlength: 2 40 }, 41 agree: "required" 42 }, 43 messages: { 44 firstname: "请输入您的名字", 45 lastname: "请输入您的姓氏", 46 username: { 47 required: "请输入用户名", 48 minlength: "用户名必需由两个字母组成" 49 }, 50 password: { 51 required: "请输入密码", 52 minlength: "密码长度不能小于 5 个字母" 53 }, 54 confirm_password: { 55 required: "请输入密码", 56 minlength: "密码长度不能小于 5 个字母", 57 equalTo: "两次密码输入不一致" 58 }, 59 email: "请输入一个正确的邮箱", 60 agree: "请接受我们的声明", 61 topic: "请选择两个主题" 62 } 63 }); 64 }); 65 </script> 66 <style> 67 .error{ 68 color:red; 69 } 70 </style> 71 </head> 72 <body> 73 <form class="cmxform" id="signupForm" method="get" action=""> 74 <fieldset> 75 <legend>验证完整的表单</legend> 76 <p> 77 <label for="firstname">名字</label> 78 <input id="firstname" name="firstname" type="text"> 79 </p> 80 <p> 81 <label for="lastname">姓氏</label> 82 <input id="lastname" name="lastname" type="text"> 83 </p> 84 <p> 85 <label for="username">用户名</label> 86 <input id="username" name="username" type="text"> 87 </p> 88 <p> 89 <label for="password">密码</label> 90 <input id="password" name="password" type="password"> 91 </p> 92 <p> 93 <label for="confirm_password">验证密码</label> 94 <input id="confirm_password" name="confirm_password" type="password"> 95 </p> 96 <p> 97 <label for="email">Email</label> 98 <input id="email" name="email" type="email"> 99 </p> 100 <p> 101 <label for="agree">请同意我们的声明</label> 102 <input type="checkbox" class="checkbox" id="agree" name="agree"> 103 </p> 104 <p> 105 <label for="newsletter">我乐意接收新信息</label> 106 <input type="checkbox" class="checkbox" id="newsletter" name="newsletter"> 107 </p> 108 <fieldset id="newsletter_topics"> 109 <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend> 110 <label for="topic_marketflash"> 111 <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash 112 </label> 113 <label for="topic_fuzz"> 114 <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz 115 </label> 116 <label for="topic_digester"> 117 <input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester 118 </label> 119 <label for="topic" class="error" style="display:none">至少选择两个</label> 120 </fieldset> 121 <p> 122 <input class="submit" type="submit" value="提交"> 123 </p> 124 </fieldset> 125 </form> 126 </body> 127 </html>
required的使用：
required: true 值是必须的。
required: "#aa:checked" 表达式的值为真，则需要验证。
required: function(){} 返回为真，表示需要验证。
常用的方法
1.用其他方式替代默认的submit
1 $().ready(function() { 2 $("#signupForm").validate({ 3 submitHandler:function(form){ 4 alert("提交事件!"); 5 form.submit(); 6 } 7 }); 8 });
使用ajax方式
1 $(".selector").validate({ 2 submitHandler: function(form) 3 { 4 $(form).ajaxSubmit(); 5 } 6 })
可以设置 validate 的默认值，写法如下：
1 $.validator.setDefaults({ 2 submitHandler: function(form) { alert("提交事件!");form.submit(); } 3 });
2.debug，只验证不提交表单
如果这个参数为true，那么表单不会提交，只进行检查，调试十分方便。
1 $().ready(function() { 2 $("#signupForm").validate({ 3 debug:true 4 }); 5 });
如果一个页面中有多个表单都想设置成为debug，则使用：
1 $.validator.setDefaults({ 2 debug: true 3 })
3.ignore：忽略某些元素不验证
ignore：".ignore"
4.更改错误信息显示的位置
errorPlacement：Callback
指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面。
1 errorPlacement:function(error,element){ 2 rerror.appendTo(element.parent()); 3 }
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> 7 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> 8 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> 9 <script> 10 $.validator.setDefaults({ 11 submitHandler: function() { 12 alert("提交事件!"); 13 } 14 }); 15 16 $().ready(function() { 17 // 提交时验证表单 18 var validator = $("#form1").validate({ 19 errorPlacement: function(error, element) { 20 // Append error within linked label 21 $( element ) 22 .closest( "form" ) 23 .find( "label[for='" + element.attr( "id" ) + "']" ) 24 .append( error ); 25 }, 26 errorElement: "span", 27 messages: { 28 user: { 29 required: " (必需字段)", 30 minlength: " (不能少于 3 个字母)" 31 }, 32 password: { 33 required: " (必需字段)", 34 minlength: " (字母不能少于 5 个且不能大于 12 个)", 35 maxlength: " (字母不能少于 5 个且不能大于 12 个)" 36 } 37 } 38 }); 39 40 $(".cancel").click(function() { 41 validator.resetForm(); 42 }); 43 }); 44 </script> 45 <style> 46 .error{ 47 color:red; 48 } 49 </style> 50 </head> 51 <body> 52 <form method="get" class="cmxform" id="form1" action=""> 53 <fieldset> 54 <legend>登录框</legend> 55 <p> 56 <label for="user">用户名</label> 57 <input id="user" name="user" required minlength="3"> 58 </p> 59 <p> 60 <label for="password">密码</label> 61 <input id="password" type="password" maxlength="12" name="password" required minlength="5"> 62 </p> 63 <p> 64 <input class="submit" type="submit" value="Login"> 65 </p> 66 </fieldset> 67 </form> 68 </body> 69 </html>
5.每个字段验证通过执行函数
success：String，Callback
要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。
1 success: function(label) { 2 // set as text for IE 3 label.html(" ").addClass("checked"); 4 //label.addClass("valid").text("Ok!") 5 }
6.异步验证
remote：url
使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项
remote："check-email.php"
1 remote:{ 2 url:"check-email.php", 3 type:"post", 4 dataType:"json", 5 data:{ 6 username:function(){ 7 8 return $("#username").val(); 9 }} 10 11 }
