首先咱们须要了解ValidateBox验证的几个基本的属性:ui
名称 类型 说明 默认值
required boolean 定义是否字段应被输入。 false
validType string 定义字段的验证类型有默认的也可自定义。 null
missingMessage string 当文本框是空时出现的提示文字。 This field is required.
invalidMessage string 当文本框的内容无效时出现的提示文字。 nullspa
<div class="timebox">
<label><span>开始时间:</span><input id="start" type="text" class="text-whtie ui-datetimebox" name="search_beginTime" data-options="prompt:'请选择开始日期',editable:false,required:'true'" ></label><br>
<label style="margin-left: 10px;">
<span>结束时间:</span>
<input id="end" type="text" class="text-whtie ui-datetimebox" name="search_endTime" data-options="prompt:'请选择结束日期',editable:false,required:'true',validType:'equaldDate[\'#start\']'" ></label><br>
</div>
<div class="o2">
<span style="margin-right: 15px;">氧含量(%):</span>
<input type="text" name="search_yhl" id="oxygen" value="" style="width: 100px;" class="text-whtie ui-validatebox" data-options="editable:true,validType:'numberYhl'" />
</div>
<div class="o2">
<span style="margin-right: 15px;">身份证:</span>
<input type="text" name="search_idcard" id="card" value="" style="width: 400px;" class="text-whtie ui-validatebox" />
</div>
<script>
/*第一种直接在要验证的验证框中使用validType属性定义验证类型(方法)
equaldDate 和 numberYhl 已在上边的input中定义。
*/
$.extend($.fn.validatebox.defaults.rules, {
equaldDate: {
validator: function (value, param) {
var d1 = $(param[0]).datetimebox('getValue'); //获取开始时间
return value >= d1; //有效范围为大于开始时间的日期
},
message: '结束日期不能早于开始日期!'
}
})ip
$.extend($.fn.validatebox.defaults.rules, {
numberYhl: {
validator: function (value, param) {
if(value == ''){
return true;
}else{
var reg = /^([1-9]\d?(\.\d{1,2})?|0\.\d{1,2}|100)$/;
return reg.test(value);
}
},
message: '请填写0-100的数,最多两位小数'
}
})
/第二种直接经过js获取属性,定义要素/
$(function(){
$('#card').validatebox({
validType:" idcard",
required: "true",
});
$.extend($.fn.validatebox.defaults.rules,{
idcard: {
validator: function(value, param){
return/^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);
},
message: '身份证号码格式不正确'
}
});
});
//推荐使用第一种。
$.extend($.fn.validatebox.defaults.rules,{
类型名称(方法名): {
validator: function(value, param){
return boolean;
},
message: 'xxx'
}
/这是ValidateBox 验证框实现验证的固定格式,在这里写重写的验证其及方法和错误信息,
value 是要验证的值,param是方法所携带的出参数。
若是function返回的是真则不输出message,若是false输出message/
});
</script>get