JQuery-自定义验证

1、自定义验证规则，下面的JS自定义了两个规则，password和confirm_password

$().ready(function() {
    $("#form2").validate({
        rules: {
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            }
        },
        messages: {
            password: {
                required: "没有填写密码",
                minlength: jQuery.format("密码不能小于{0}个字符")
            },
            confirm_password: {
                required: "没有确认密码",
                minlength: "确认密码不能小于{0}个字符",
                equalTo: "两次输入密码不一致嘛"
            }
        }
    });
});
   

2、required除了设置为true/false之外，还可以使用表达式或者函数，比如

$("#form2").validate({
    rules: {
        funcvalidate: {
            required: function() {return $("#password").val()!=""; }
        }
    },
    messages: {
        funcvalidate: {
            required: "有密码的情况下必填"
        }
    }
});

     密码<input id="password" name="password" type="password" />
     确认密码<input id="confirm_password" name="confirm_password" type="password" />
     条件验证<input id="funcvalidate" name="funcvalidate" value="" />

3、对于复杂的验证，可以通过jQuery.validator.addMethod添加自定义的验证规则。

     官网提供的additional-methods.js里包含一些常用的验证方式，比如lettersonly，ziprange，nowhitespace等。

// 字符验证   
jQuery.validator.addMethod("userName", function(value, element) {
    return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "用户名只能包括中文字、英文字母、数字和下划线");   

//然后就可以使用这个规则了
$("#form1").validate({
    // 验证规则
    rules: {
        userName: {
            required: true,
            userName: true,
            rangelength: [5,10]
        }
    },
    /* 设置错误信息 */
    messages: {
        userName: {
            required: "请填写用户名",
            rangelength: "用户名必须在5-10个字符之间" 
        }                
    },
}); 

 4、radio、checkbox、select的验证方式类似。

性别
<span>
男<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}"/><br />
女<input type="radio" id="gender_female" value="f" name="gender" />
</span>
           
checkbox的验证

最少选择两项
<span>
选项1<input type="checkbox" id="check_1" value="1" name="checkGroup"
class="{required:true,minlength:2, messages:{required:'必须选择',minlength:'至少选择2项'}}" /><br />
选项2<input type="checkbox" id="check_2" value="2" name="checkGroup" /><br />
选项3<input type="checkbox" id="check_3" value="3" name="checkGroup" /><br />
</span>

select的验证

下拉框
<span>
    <select id="selectbox" name="selectbox" class="{required:true}">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</span>

5、Ajax验证

用remote可以进行Ajax验证
remote: {
url: "url",      //url地址
type: "post",           //发送方式
dataType: "json",       //数据格式     data: {                 //要传递的数据
username: function() {
return $("#username").val();
}}
}

 

补充：

//form验证
                 $("#myform").validate();
                 //验证电话号码
                jQuery.validator.addMethod("isTel", function(value, element) {   
                      //可以匹配座机号码，形式如0511-12345678-1234，其中区号可以3位或4位或没有，直拨号码可以7位或8位，分机号可以为0至4位   
                      var tel = /^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}(-\d{1,4})?$/;   
                      return this.optional(element) || (tel.test(value));      
                 }, "格式"); 
                
                 // 手机号码验证      
                 jQuery.validator.addMethod("isMobile", function(value, element) {      
                     var length = value.length;  
                     var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;  
                     return this.optional(element) || (length == 11 && mobile.test(value));    
                  }, "格式不正确");  
                 //被投诉单位联系方式

<input type="text" name="accusedUnitName" class="isTel" maxLength="30" />