jquery.validate使用笔记
jquery.validate是一个基于jquery的非常优秀的验证框架,我们可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,而且对国际化也有非常好的支持。
jquery.validate 官方网址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
简单html配置校验
这种方式直接将校验条件放到class中。
错误消息定义"data-msg-检验名称"作为它的属性,但要注意这里在1.10.0以后的版本才支持,旧版本需要使用javascript定制错误提示。
View Code
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 3 4 <title>1</title> 5 6 <script src="jquery.js" type="text/javascript"></script> 7 <script src="jquery.validate.js" type="text/javascript"></script> 8 9 <script type="text/javascript"> 10 // 仅在demo时使用 11 $.validator.setDefaults({ 12 submitHandler: function() { 13 alert("submitted!"); 14 } 15 }); 16 17 $(document).ready(function() { 18 $("#form1").validate(); 19 }); 20 </script> 21 <style type="text/css"> 22 input.error { 23 border:1px solid red; 24 } 25 label.error { 26 color:red; 27 } 28 input.success { 29 border:1px solid green ; 30 } 31 label.success { 32 color:green; 33 } 34 </style> 35 </head> 36 <body> 37 <div> 38 <form id="form1" method="get" action=""> 39 <fieldset> 40 <legend>直接写在表单上</legend> 41 <label for="name">名字(必填*)</label> 42 <input type="text" name="name" class="required" data-msg-required="请输入名字"/> 43 <br> 44 45 <label for="name">邮件(必填*)</label> 46 <input type="text" name="email" class="required email" data-msg-required="请输入邮件" data-msg-email="邮件格式错误."/> 47 <br> 48 <input type="submit" value="提交"/> 49 </fieldset> 50 </form> 51 </div> 52 53 <div id="warning"></div> 54 </body> 55 </html>
html中配置校验进阶
这种方式,需要多引入jquery.metadata.js。调用$.metadata.setType("attr", "validate");即可把校验的配置写到相应的属性上。
View Code
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 3 4 <title>2</title> 5 6 <script src="jquery.js" type="text/javascript"></script> 7 <script src="jquery.metadata.js" type="text/javascript"></script> 8 <script src="jquery.validate.js" type="text/javascript"></script> 9 10 <script type="text/javascript"> 11 12 $.validator.setDefaults({ 13 submitHandler: function() { 14 alert("submitted!"); 15 } 16 }); 17 //当配置这句话时,原来使用在class中的配置,可以被配置到validate中 18 $.metadata.setType("attr", "validate"); 19 20 $(document).ready(function() { 21 $("#form1").validate(); 22 $("#form2").validate(); 23 }); 24 </script> 25 <style type="text/css"> 26 input.error { 27 border:1px solid red; 28 } 29 label.error { 30 color:red; 31 } 32 input.success { 33 border:1px solid green ; 34 } 35 label.success { 36 color:green; 37 } 38 </style> 39 </head> 40 <body> 41 <div> 42 <form id="form1" method="get" action=""> 43 <fieldset> 44 <legend>直接写在表单上</legend> 45 <label for="name">名字(必填*)</label> 46 <input type="text" name="name" class="{required:true, messages:{required:'请输入名字.'}}"/> 47 <br> 48 49 <label for="name">邮件(必填*)</label> 50 <input type="text" name="email" class="{required:true, email:true, messages:{required:'请输入邮件.',email:'邮件格式错误.'}}"/> 51 <br> 52 <input type="submit" value="提交"/> 53 </fieldset> 54 </form> 55 </div> 56 57 <div> 58 <form id="form2" method="get" action=""> 59 <fieldset> 60 <legend>直接写在表单上,并使用定制属性</legend> 61 <label for="name">名字(必填*)</label> 62 <input type="text" name="name" validate="{required:true, messages:{required:'请输入名字.'}}"/> 63 <br> 64 65 <label for="name">邮件(必填*)</label> 66 <input type="text" name="email" validate="{required:true, email:true, messages:{required:'请输入邮件.',email:'邮件格式错误.'}}"/> 67 <br> 68 <input type="submit" value="提交"/> 69 </fieldset> 70 </form> 71 </div> 72 <div id="warning"></div> 73 </body> 74 </html>
纯javascript配置校验
纯javascript的方式,不需要引入额外的jquery.metadata.js文件。这种方式相对较灵活且不侵入html。
View Code
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 3 4 <title>3</title> 5 6 <script src="jquery.js" type="text/javascript"></script> 7 <script src="jquery.validate.js" type="text/javascript"></script> 8 9 <script type="text/javascript"> 10 11 $.validator.setDefaults({ 12 submitHandler: function() { 13 alert("submitted!"); 14 } 15 }); 16 17 $(document).ready(function() { 18 19 $("#form3").validate({ 20 21 rules: { 22 "name" : {required:true}, 23 "email" : {required:true, email:true} 24 }, 25 messages: { 26 "name" : {required:'请输入名字.'}, 27 "email" : {required:'请输入邮件.',email:'邮件格式错误.'} 28 } 29 }); 30 }); 31 </script> 32 <style type="text/css"> 33 input.error { 34 border:1px solid red; 35 } 36 label.error { 37 color:red; 38 } 39 input.success { 40 border:1px solid green ; 41 } 42 label.success { 43 color:green; 44 } 45 </style> 46 </head> 47 <body> 48 <form id="form3" method="get" action=""> 49 <fieldset> 50 <legend>写在Javascript上</legend> 51 <label for="name">名字(必填*)</label> 52 <input type="text" name="name"/> 53 <br> 54 55 <label for="name">邮件(必填*)</label> 56 <input type="text" name="email"/> 57 <br> 58 <input type="submit" value="提交"/> 59 </fieldset> 60 </form> 61 </div> 62 63 <div id="warning"></div> 64 </body> 65 </html>
统一输出错误到其它位置
在第三点的基础上,我们可以把消息统一输出到我们指定的位置。核心配置在于:errorLabelContainer和wrapper,详见代码:
View Code
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 3 4 <title>4</title> 5 6 <script src="jquery.js" type="text/javascript"></script> 7 <script src="jquery.validate.js" type="text/javascript"></script> 8 9 <script type="text/javascript"> 10 11 $.validator.setDefaults({ 12 submitHandler: function() { 13 alert("submitted!"); 14 } 15 }); 16 17 $(document).ready(function() { 18 $("#form3").validate({ 19 errorLabelContainer: $("#warning ul"), 20 wrapper: 'li', 21 rules: { 22 "name" : {required:true}, 23 "email" : {required:true, email:true} 24 }, 25 messages: { 26 "name" : {required:'请输入名字.'}, 27 "email" : {required:'请输入邮件.',email:'邮件格式错误.'} 28 } 29 }); 30 }); 31 </script> 32 <style type="text/css"> 33 input.error { 34 border:1px solid red; 35 } 36 label.error { 37 color:red; 38 } 39 input.success { 40 border:1px solid green ; 41 } 42 label.success { 43 color:green; 44 } 45 </style> 46 </head> 47 <body> 48 <div> 49 <form id="form3" method="get" action=""> 50 <fieldset> 51 <legend>写在Javascript上,并将错误信息输到其它位置</legend> 52 <label for="name">名字(必填*)</label> 53 <input type="text" name="name"/> 54 <br> 55 56 <label for="name">邮件(必填*)</label> 57 <input type="text" name="email"/> 58 <br> 59 <input type="submit" value="提交"/> 60 </fieldset> 61 </form> 62 </div> 63 64 <div id="warning"><ul></ul></div> 65 </body> 66 </html>