Jquery李炎恢——50验证注册表单【16】

学习要点：

1.html部分

2.css部分

3.jQuery部分

本节课，将使用validate.js验证插件功能，完成表单注册验证的功能。

一、HTML部分

html部分不需要更改太多，只要加个存放错误提示的列表标签即可。

<ol class="reg_error"></ol>

二、css部分

css部分主要是成功后引入一张小图标，还有错误列表样式。

#reg p .start{

    color:maroon;

}

#reg p .success{

   display:inline-block;

   width:28px;

   background:url(../img/reg_succ.png)  no-repeat;

}

#reg ol{

   margin:0;

   padding:0 0 0 20px;

}

#reg ol li{

  color:maroon;

}

三、jQuery部分

jQuery部分很常规，基本使用了validate.js的核心功能。

$("#reg").dialog({

  autoOpen:false,

  modal:true,

  resizable:false,

  width:320,

  height:340,

  buttons:{

    "提交"：function(){

         $(this).submit();

     }

  },

}).buttonset().validate({

   submitHandler:function(form){

      alert("验证完成，准备提交！");

   }，

   showErrors:function(errorMap,errorList){

       var errors=this.numberOfInvalids();

       if(errors>0){

              $("#reg").dialog("option","height",20*errors+320);

       }else{

              $("#reg").dialog("option","height",340);

       }

       this.defaultShowErrors();

   },

   highlight:function(element, errorClass){

       $(element).css("border","1px solid #630");

   },

   unhighlight:function(element, errorClass){

       $(element).css("border","1px solid #ccc");

       $(element).parent().find("span").html("&nbsp;").addClass("success");

   },

   errorLabelContainer:"ol.reg_error",

   wrapper:"li",

   rules:{

         user:{

            required:true,

            minlength:2,

         },

         pass:{

            required:true,

            minlength:6,

         },

         email:{

            required:true,

            email:true,

         },

         date:{

           required:true,

         },

   },

   message:{

         user:{

            required:"账号不得为空！",

            minlength:jQuery.format("账号不得小于{0}位！"),

         },

         pass:{

            required:"密码不得为空！",

            minlength:jQuery.format("密码不得小于{0}位！"),

         },

         email:{

            required:"邮箱不得为空！",

            email:"请输入正确的邮箱格式！",

         },

         date:{

            date:true,

         },

   },

});