jQuery 之 验证表单

简单的东西重复做，做多了之后，才能说熟能生巧。

做好一个精美的页面，固然是好，但是，一个页面除了写好之外，我们更需要的是将其功能完善。比如表单的验证，这只是众多工作之一。然后本次就以jQuery的validate插件，来学习记录一下表单验证部分。但愿自己下次在遇到写表单验证时，可以不费吹灰之力。

接下来就是验证代码展示：

 //身份证号验证
 jQuery.validator.addMethod("isIdNo", function (value, element){
     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)$/;
     return this.optional(element) || id.test(value);
 });
 //邮编验证
 jQuery.validator.addMethod("isPostal", function(value, element) {
     var tel = /^[0-9]{6}$/;
     return this.optional(element) || (tel.test(value));
 });
 //手机号码验证
 jQuery.validator.addMethod("isPhone", function (value, element) {
     var length = value.length;
     var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
     var tel = /^\d{3,4}-?\d{7,9}$/;
     return this.optional(element) || (tel.test(value) || mobile.test(value));
 });
 //判断密码是否相同
 jQuery.validator.addMethod("isSame", function(value, element) {
     var pwd1 = document.getElementById("Pwd1").value;
     return this.optional(element) || (pwd1.test(value));
 });

 jQuery.validator.addMethod("isSimliar", function(value, element) {
     var ID1 = $("#ID01").val()
     var ID2 = $("#ID02").val()
     if(ID1 == ID2)
         return true;
     return this.optional(element);
 });

 //判断身份证号码是否相同
 jQuery.validator.addMethod("isSimliar", function(value, element) {
     var Idno = document.getElementById("ID01").value;
     return this.optional(element) || (Idno.test(value));
 });

 $(document).ready(function(){
              $(".form-inline").validate({
                 onsubmit: true,
                 debug: false,

                 rules:{
                     username:{
                         required:true

                     },
                     name:{
                         required:true
                     },
                     password:{
                         required:true
                     },
                     pswConfirm:{
                         required:true,
                         isSame:true

                     },
                     idNo:{
                         required:true,
                         isIdNo:true
                     },
                     idNoConfirm:{
                         required:true,
                         isSimliar:true
                     },
                     mobile:{
                          required:true,
                         isPhone:true
                      },
                      qq:{
                          required:true
                      },
                      major:{
                          required:true

                      },
                      email:{
                         required:true,
                         isPostal:true
                     },
                     address:{
                         required:true

                     },

                 },
                 messages:{
                     username:{
                         required:"用户名不能为空"
                     },
                     name:{
                         required:"姓名不能为空"
                     },
                     password:{
                         required:"密码不能为空"
                     },
                     pswConfirm:{
                         required:"密码不能为空",
                         isSame:"密码必须一致"

                     },
                     idNo:{
                         required:"身份证号不能为空",
                         isIdNo:"身份证格式错误"
                     },
                     idNoConfirm:{
                         required:"身份证号不能为空",
                         isSimliar:"身份证必须一致"
                     },
                     mobile:{
                          required:"手机号不能为空",
                         isPhone:"手机号码格式错误"
                      },
                      qq:{
                          required:"QQ号不能为空"
                      },
                      major:{
                          required:"专业不能为空"

                      },
                      email:{
                         required:"邮箱不能为空",
                         isPostal:"邮箱格式错误"
                     },
                     address:{
                         required:"邮箱地址不能为空"

                     },
                 },
                  error:function(span){
                     span.raddClass("error glyphicon glyphicon-remove");
                     },
             });

 });

其实，代码很简单，但是可能是因为自己忘记了一些内容，才导致自己写这段代码的耗时很长。记个笔记放在这里，多多复习巩固！

但实际上，如果对jQuery的使用比较熟练的话，可能会发现上述代码可以更加优化。注意需要写表示错误的css样式。

最终效果表示为：

比如说，上述中对密码的再次验证要求其相同，可以直接用equalTo,不用添加方法。

用一个图来记住：

本次写代码耗时较长的原因是：js中是没有equals()方法的，可以直接用 == 或者 is()方法直接代替。

最后用jQuery写得js文件还需要validate.js

很简单的代码，不能耗费太多的时间，不然，别人就开始质疑你的能力了。加油，Fighting!