初次使用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%"> 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