JQuery Validate插件与实现

菜鸟拙见，望请纠正

一：效果展示：以下是两个注册表单验证，左边使用Jquery validate插件实现，右边是自己用JQuery实现，效果差不多，但个人推荐用插件，毕竟前人栽了树而且长大了后人当然好乘凉嘛！

二：效果实现

首先是插件效果：插件用起来很简单，引入插件后，还是再新建js文件，在js文件中按实际要求填写就好，下边是源码，

 $(document).ready(function(){
     validForm();
 });
 function validForm(){

     $(".login-from").validate({
         rules:{
             username:{
                 required:true,
                 minlength:6,
                 maxlength:20,
             },
             password:{
                 required:true,
                 isPassword:true,
                 minlength:6,
                 maxlength:20,
             },
             verification:{
                 required:true,
                 equalTo:"ITEXCHANGE",
             },
         },
         messages:{
             username: {
                     required: "*必填項",
                     minlength: "最少不能少于六个字符",
                     maxlength: "最多不能超过20个字符",
             },
             password:{
                 required:"*必填項",
                 minlength: "最少不能少于六个字符",
                 maxlength: "最多不能超过20个字符",
                 isPassword:"密码需由6-20个字母、数字、下划线组成",
             },
             verification:{
                 required:"*必填项",
                 equalTo:"验证码错误",
             },
         },
     });

     $(".register-from").validate({
         rules:{
             username:{
                 required:true,
                 minlength:6,
                 maxlength:20,
             },
             password:{
                 required:true,
                 isPassword:true,
                 minlength:6,
                 maxlength:20,
             },
             confirm:{
                 required:true,
                 equalTo:".password2",
             },
             verification:{
                 required:true,
                 equalTo:"ITEXCHANGE",
             },
         },
         messages:{
             username: {
                     required: "*必填項",
                     minlength: "最少不能少于六个字符",
                     maxlength: "最多不能超过20个字符",
             },
             password:{
                 required:"*必填項",
                 minlength: "最少不能少于六个字符",
                 maxlength: "最多不能超过20个字符",
                 isPassword:"密码需由6-20个字母、数字、下划线组成",
             },
             confirm:{
                 required:"*必填項",
                 equalTo:"与上次输入不一致",
             },
             verification:{
                 required:"*必填项",
                 equalTo:"验证码错误",
             },
         },
     });
     jQuery.validator.addMethod("isPassword", function(value, element) {
         var tel = /^(\w){6,20}$/;
         return this.optional(element) || (tel.test(value));
     });
 }

填写内容英语一看就懂，不仅如此，该插件还支持自定义验证方法，修改样式。但注意的是rules是依靠input的name属性来识别input的

然后还有就是异步验证数据库里该比如用户名是否已经存在，这个可能经常见

 $(function() {
 //表单验证JS
   $("#form1").validate({
     //出错时添加的标签
     errorElement: "span",
     rules: {
       txtUserName: {
         required: true,
         minlength: 3,
         maxlength: 16,
         remote: {
           type: "post",//请求方式
           url: "/tools/ValidateUserName.ashx",//发送请求的后端url地址
           data: {
             username: function() {
               return $("#txtUserName").val();//id名为“txtUserName”
             }
           },
           dataType: "html",//发送的数据类型
           dataFilter: function(data, type) {//返回结果
             if (data == "true")
               return true;
             else
               return false;
           }
         }
       }
     },
     success: function(label) {
       //正确时的样式
       label.text(" ").addClass("success");
     },
     messages: {
       txtUserName: {
         required: "请输入用户名，3-16个字符（字母、数字、下划线），注册后不能更改",
         minlength: "用户名长度不能小于3个字符",
         maxlength: "用户名长度不能大于16个字符",
         remote: "用户名不可用"
       }
     }
   });
 });

然后接下来就是自代码实现

 $(document).ready(function(){
     validForm();
 });
 function validForm(){

         $("form :input").blur(function(){
             var $parent = $(this).parent();
             //删除之前的错误提醒信息
             $parent.find(".msg").remove();

             //验证“姓名”
             if($(this).is("#username")){
                 if($.trim(this.value) == "" || $.trim(this.value).length < 6){
                     var errorMsg = " 请输入至少6位的姓名！";
                     $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                 }
                 else{
                     var okMsg=" 格式正确";
                     $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                 }
             }

             //验证密码
             if($(this).is("#password")){
                 if($.trim(this.value) == ""||!isPasswd($.trim(this.value))){
                     var errorMsg = "密码需由6-20个字母、数字、下划线组成";
                     $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                 }
                 else{
                     var okMsg=" 格式正确";
                     $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                 }
             }

              //密码再次确定
             if($(this).is("#confirm")){
                 var prepassword = $(".password2").val();
                 if($.trim(this.value) != prepassword||$.trim(this.value)=="") {
                     var errorMsg = "请输入与上次一致的密码";
                     $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                 } else {
                     var okMsg = " 输入正确";
                     $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                 }
             }

             //验证码确定
             if($(this).is("#verification")){
                 if($.trim(this.value) != "ＩＴＥＸＣＨＡＮＧＥ") {
                     var errorMsg = "请输入正确的验证码";
                     $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                 } else {
                     var okMsg = " 输入正确";
                     $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                 }
             }

         }).keyup(function(){
             //triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
             $(this).triggerHandler("blur");
         });
             .focus(function(){
             $(this).triggerHandler("blur");
         });
 }    

 //校验密码：只能输入6-20个字母、数字、下划线
 function isPasswd(s){
     var patrn=/^(\w){6,20}$/;
     if (!patrn.exec(s)) return false
     return true
 }

自己写的内容可能自己理解比较好，但是对比之后就会发现，代码比较多，而且考虑的情况比较多，显得比较繁杂

三：关于插件与交互