首页 > 代码库 > jQuery 之 验证表单
jQuery 之 验证表单
简单的东西重复做，做多了之后，才能说熟能生巧。
做好一个精美的页面，固然是好，但是，一个页面除了写好之外，我们更需要的是将其功能完善。比如表单的验证，这只是众多工作之一。然后本次就以jQuery的validate插件，来学习记录一下表单验证部分。但愿自己下次在遇到写表单验证时，可以不费吹灰之力。
接下来就是验证代码展示：
1 //身份证号验证 2 jQuery.validator.addMethod("isIdNo", function (value, element){ 3 var id=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/; 4 return this.optional(element) || id.test(value); 5 }); 6 //邮编验证 7 jQuery.validator.addMethod("isPostal", function(value, element) { 8 var tel = /^[0-9]{6}$/; 9 return this.optional(element) || (tel.test(value)); 10 }); 11 //手机号码验证 12 jQuery.validator.addMethod("isPhone", function (value, element) { 13 var length = value.length; 14 var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; 15 var tel = /^\d{3,4}-?\d{7,9}$/; 16 return this.optional(element) || (tel.test(value) || mobile.test(value)); 17 }); 18 //判断密码是否相同 19 jQuery.validator.addMethod("isSame", function(value, element) { 20 var pwd1 = document.getElementById("Pwd1").value; 21 return this.optional(element) || (pwd1.test(value)); 22 }); 23 24 jQuery.validator.addMethod("isSimliar", function(value, element) { 25 var ID1 = $("#ID01").val() 26 var ID2 = $("#ID02").val() 27 if(ID1 == ID2) 28 return true; 29 return this.optional(element); 30 }); 31 32 33 34 //判断身份证号码是否相同 35 jQuery.validator.addMethod("isSimliar", function(value, element) { 36 var Idno = document.getElementById("ID01").value; 37 return this.optional(element) || (Idno.test(value)); 38 }); 39 40 $(document).ready(function(){ 41 $(".form-inline").validate({ 42 onsubmit: true, 43 debug: false, 44 45 rules:{ 46 username:{ 47 required:true 48 49 }, 50 name:{ 51 required:true 52 }, 53 password:{ 54 required:true 55 }, 56 pswConfirm:{ 57 required:true, 58 isSame:true 59 60 }, 61 idNo:{ 62 required:true, 63 isIdNo:true 64 }, 65 idNoConfirm:{ 66 required:true, 67 isSimliar:true 68 }, 69 mobile:{ 70 required:true, 71 isPhone:true 72 }, 73 qq:{ 74 required:true 75 }, 76 major:{ 77 required:true 78 79 }, 80 email:{ 81 required:true, 82 isPostal:true 83 }, 84 address:{ 85 required:true 86 87 }, 88 89 }, 90 messages:{ 91 username:{ 92 required:"用户名不能为空" 93 }, 94 name:{ 95 required:"姓名不能为空" 96 }, 97 password:{ 98 required:"密码不能为空" 99 },100 pswConfirm:{101 required:"密码不能为空",102 isSame:"密码必须一致"103 104 },105 idNo:{106 required:"身份证号不能为空",107 isIdNo:"身份证格式错误"108 },109 idNoConfirm:{110 required:"身份证号不能为空",111 isSimliar:"身份证必须一致"112 },113 mobile:{114 required:"手机号不能为空",115 isPhone:"手机号码格式错误" 116 },117 qq:{118 required:"QQ号不能为空"119 },120 major:{121 required:"专业不能为空"122 123 },124 email:{125 required:"邮箱不能为空",126 isPostal:"邮箱格式错误"127 },128 address:{129 required:"邮箱地址不能为空"130 131 },132 },133 error:function(span){134 span.raddClass("error glyphicon glyphicon-remove");135 },136 });137 138 });
其实，代码很简单，但是可能是因为自己忘记了一些内容，才导致自己写这段代码的耗时很长。记个笔记放在这里，多多复习巩固！
但实际上，如果对jQuery的使用比较熟练的话，可能会发现上述代码可以更加优化。注意需要写表示错误的css样式。
最终效果表示为：
比如说，上述中对密码的再次验证要求其相同，可以直接用equalTo,不用添加方法。
用一个图来记住：
本次写代码耗时较长的原因是：js中是没有equals()方法的，可以直接用 == 或者 is()方法直接代替。
最后用jQuery写得js文件还需要validate.js
很简单的代码，不能耗费太多的时间，不然，别人就开始质疑你的能力了。加油，Fighting!
jQuery 之 验证表单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。