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
}

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

三：关于插件与交互