初次使用validator.addMethod

初次使用validator.addMethod，在这里记录一下我学到的。

在前端使用  jQuery.validator   可以对输入的数据进行校验，若没有太过复杂的逻辑校验过程，个人认为用此方法比传入后台做校验再传回来更方便。

validator中可以校验的标签有以下这些（标签代表这什么意思大家自行百度或者谷歌吧，很好找）：

required,remote,email,url,date,dateISO,number,digits,maxlength,minlength,rangelength，range,max,min

但如果我有更复杂一些的校验要求，则需自定义一些校验规则，这时就用到了  .addMethod 

例：当 isCheck 字段值为“1（是）”时，checkTime的值不能为空，当为“0（否）”时，则不进行校验（isCheck和checkTime都在名为form1的表单内，好像不放在form表单内就不好做校验( ▼-▼ )）

自定义规则：

jQuery.validator.addMethod("info",function(value,element){
    var returnVal=true;
    var isCheck=$("select[name='isCheck']").val();
    if(isCheck=='1'){
        returnVal=false;
        $(element).data("error-msg","不要忘记查验时间！");
    }
    return returnVal;
},function(params,element){
    return $(element).data("error-msg");
});

$("#form1").validate({
    rules:{
        checkTime:{
            info:true  //这里调用了上面的自定义规则，规则标签为“info”，如果规则内容返回为false则将展示提示信息
        }
    }
});
$("#form1").validate();

.addMethod(a,b,c)，个人理解，a是规则定义之后的标签。b为校验逻辑，通常是个方法。c为返回值，可以是写死的值，也可以是个方法，通常b返回false之后，c值会出现。

最终结果：

1、当我选择否（0）时：

2、当我选择是时：

 

放出部分代码：

<form id="form1">
<label><span class="c-red">*</span>isCheck：</label>
<div>
    <select name="isCheck" id="isCheck" style="width: 91px" >
        <option value="0">否</option>
        <option value="1">是</option>
    </select>
</div>
<br/>
<div>
    <label style="width: 18%">&nbsp;checkTime：</label>
    <div>
        <input name="checkTime" id="checkTime" type="text"/>
    </div>
</div>
<br/>
</form>

<script type="text/javascript">
    $(function() {
        $(".selectDate").each(function(){
            laydate.render({
                elem: this,
                trigger: 'click',
            });
        });
        jQuery.validator.addMethod("info",function(value,element){
            var returnVal=true;
            var isCheck=$("select[name='isCheck']").val();
            if(isCheck=='1'){
                returnVal=false;
                $(element).data("error-msg","不要忘记查验时间！");
            }
            return returnVal;
        },function(params,element){
            return $(element).data("error-msg");
        });

        $("#form1").validate({
            rules:{
                declNo:{
                    required:true
                },
                checkTime:{
                    info:true  //如果返回为false则展示提示信息
                }
            }
        });
        $("#form1").validate();
    });
</script>

本人初次接触网页开发，大家若看到有错误的地方还望指正，3Q