jQuery校验
jQuery校验
是准备写一个EF和MVC的校验的，因为最近是一直打算写和MVC有关的，这写这之前，还是先决定写一个关于jQuery的校验，稍后再写MVC和EF的。当我们注册或者说是添加一些信息的时候，很多时候是要符合一定的规则才可以完成CURD中的C，也就是Create增加的。不然是要给用户提示，格式如何不对等信息的。现演示之，有一小例子，现在是有一个表单上面是有姓名，此为必填项且输入的内容不能超过6个字，如不符此要求，则给给用户提示。有邮箱，如果用户输入的不符合亦给之提示。还有年龄，要求输入的是数字且是0到150之间的数字，不然同样给予之提示。
这个的话其实倒不难，我们先写一个表单，有上述元素。然后引进jQuery包和jQuery的一个验证包，需要注意一下的是，我们要先引的是jQuery包，再引进jQuery的验证包，因为jQuery的校验包是在引进jQuery包的基础上才能被执行的，此处包不可把顺序弄反了。再就是写一个检验的方法，在此方法中当得到表单后调用一个validate()方法，此方法里的参数都是键值对的方法，是一个规则rules和一个给用户提示错误消息的messages,当如果不写错误消息的话，会有一些默认的消息，那些都是英语，一会我附上详细的一个资料。而rules里面也是写的键值对，就是各种元素的规则，其用逗号隔开，最后一个就不用写逗号了，messsages里面也是的。rules相对于messages其就是键，messages就是值了，rules写完后也是要逗号一下的，messages则不用。详情见下面的代码。一定要注意括号，哪里要写逗号，哪是不要写，还有就是不要将键值对的名称写错了，比如我开始就将messages写成了message然后运行的结果就是一直提示的是默认的英文的，后来找了好久，后来还是 个朋友发现了错误，我就改过来了。
现在附其代码如下：
1 <!DOCTYPE html> 2 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="utf-8" /> 6 <title></title> 7 <style> 8 .error { 9 color: red; 10 } 11 </style> 12 <script src="scripts/jquery-1.8.2.js"></script> 13 <script src="scripts/jquery.validate.js"></script> 14 <script type="text/javascript"> 15 $(function () { 16 initValidate();//此为初始化检验的方法。 17 }); 18 19 function initValidate() { 20 $("form").validate({ 21 rules: { 22 txtName: { 23 required: true, 24 maxlength: 6 25 },//有逗号。。。 26 txtEmail: { 27 email: true 28 },//有逗号。。。 29 txtAge: { 30 range:[0,150] 31 }//最后一个，无逗号。。。 32 },//此处是rules的结束，有逗号。 33 messages: { 34 txtName: { 35 required: "*姓名是必须要填写的", 36 maxlength:"*姓名不能超过6个字" 37 }, //有逗号。。。 38 txtEmail: "*请您输入正确的邮箱",//有逗号。。。 39 txtAge:"*年龄就是0到150之间的"//最后一个，无逗号。。。 40 }//此处是messages的结束，无逗号。 41 }); 42 } 43 </script> 44 </head> 45 <body> 46 <form> 47 <table> 48 <tr> 49 <td>姓名：</td> 50 <td><input type="text" name="txtName" value=" " /></td> 51 </tr> 52 <tr> 53 <td>年龄：</td> 54 <td><input type="text" name="txtAge" value=" " /></td> 55 </tr> 56 <tr> 57 <td>邮箱：</td> 58 <td><input type="text" name="txtEmail" value=" " /></td> 59 </tr> 60 <tr> 61 <td><input type="submit" name="name" value="提交" /></td> 62 </tr> 63 </table> 64 </form> 65 </body> 66 </html>
这样就可以有的效果：
以及这样的效果（不同处已标明）：
附上关于jQuery检验的详细资料：
1 JQuery Validate使用总结： 2 一、导入js库 3 <script src="../js/jquery.js" type="text/javascript"></script> 4 <script src="../js/jquery.validate.js" type="text/javascript"></script> 5 6 二、默认校验规则 7 (1)required:true 必输字段 8 (2)remote:"check.php" 使用ajax方法调用check.php验证输入值 9 (3)email:true 必须输入正确格式的电子邮件 10 (4)url:true 必须输入正确格式的网址 11 (5)date:true 必须输入正确格式的日期 日期校验ie6出错，慎用 12 (6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 13 (7)number:true 必须输入合法的数字(负数，小数) 14 (8)digits:true 必须输入整数 15 (9)creditcard: 必须输入合法的信用卡号 16 (10)equalTo:"#field" 输入值必须和#field相同 17 (11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀） 18 (12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符) 19 (13)minlength:10 输入长度最小是10的字符串(汉字算一个字符) 20 (14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) 21 (15)range:[5,10] 输入值必须介于 5 和 10 之间 22 (16)max:5 输入值不能大于5 23 (17)min:10 输入值不能小于10 24 25 三、默认的提示 26 messages: { 27 required: "This field is required.", 28 remote: "Please fix this field.", 29 email: "Please enter a valid email address.", 30 url: "Please enter a valid URL.", 31 date: "Please enter a valid date.", 32 dateISO: "Please enter a valid date (ISO).", 33 dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.", 34 number: "Please enter a valid number.", 35 numberDE: "Bitte geben Sie eine Nummer ein.", 36 digits: "Please enter only digits", 37 creditcard: "Please enter a valid credit card number.", 38 equalTo: "Please enter the same value again.", 39 accept: "Please enter a value with a valid extension.", 40 maxlength: $.validator.format("Please enter no more than {0} characters."), 41 minlength: $.validator.format("Please enter at least {0} characters."), 42 rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), 43 range: $.validator.format("Please enter a value between {0} and {1}."), 44 max: $.validator.format("Please enter a value less than or equal to {0}."), 45 min: $.validator.format("Please enter a value greater than or equal to {0}.") 46 }, 47 如需要修改，可在js代码中加入： 48 jQuery.extend(jQuery.validator.messages, { 49 required: "必选字段", 50 remote: "请修正该字段", 51 email: "请输入正确格式的电子邮件", 52 url: "请输入合法的网址", 53 date: "请输入合法的日期", 54 dateISO: "请输入合法的日期 (ISO).", 55 number: "请输入合法的数字", 56 digits: "只能输入整数", 57 creditcard: "请输入合法的信用卡号", 58 equalTo: "请再次输入相同的值", 59 accept: "请输入拥有合法后缀名的字符串", 60 maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"), 61 minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"), 62 rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"), 63 range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), 64 max: jQuery.validator.format("请输入一个最大为{0} 的值"), 65 min: jQuery.validator.format("请输入一个最小为{0} 的值") 66 });
好吧，今天就到这里了。写的都是些很简单的东西。欢迎赐教
