BootStrapValidator与My97日期校验的实例代码
首先my97的API中有自定义事件中有onpicking和onpicked事件、onclearing和oncleared事件、年月日时分秒的changing和changed。
我的html页面中需要展示的日期样子是:
<labelclass="col-xs-2control-label"for="ConstructionPlanAdd_planStartTime">开始时间:</label>
<divclass="col-xs-4">
<inputclass="form-controlinput-smWdate"id="ConstructionPlanAdd_planStartTime"name="planStartTime"type="text"placeholder="请选择开始时间"onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'ConstructionPlanAdd_planEndTime\');}',dateFmt:'yyyy-MM-dd',readOnly:true})"/>
</div>
<labelclass="col-xs-2control-label"for="ConstructionPlanAdd_planEndTime">结束日期:</label>
<divclass="col-xs-4">
<inputclass="form-controlinput-smWdate"id="ConstructionPlanAdd_planEndTime"type="text"name="planEndTime"placeholder="请输入结束时间"onFocus="WdatePicker({minDate:'#F{$dp.$D(\'ConstructionPlanAdd_planStartTime\');}',dateFmt:'yyyy-MM-dd',readOnly:true})"/>
</div>
我需要的效果是，当选择完日期后，可以实现bootstrapValidator的自动校验，熟读my97的API后我发现这个onpicked事件对我有用，于是我添加了onpicked事件。代码变成这样:
<labelclass="col-xs-2control-label"for="ConstructionPlanAdd_planStartTime">开始时间:</label>
<divclass="col-xs-4">
<inputclass="form-controlinput-smWdate"id="ConstructionPlanAdd_planStartTime"name="planStartTime"type="text"placeholder="请选择开始时间"onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'ConstructionPlanAdd_planEndTime\');}',dateFmt:'yyyy-MM-dd',readOnly:true,onpicked:checkPlanStartTime(this)})"/>
</div>
<labelclass="col-xs-2control-label"for="ConstructionPlanAdd_planEndTime">结束日期:</label>
<divclass="col-xs-4">
<inputclass="form-controlinput-smWdate"id="ConstructionPlanAdd_planEndTime"type="text"name="planEndTime"placeholder="请输入结束时间"onFocus="WdatePicker({minDate:'#F{$dp.$D(\'ConstructionPlanAdd_planStartTime\');}',dateFmt:'yyyy-MM-dd',readOnly:true,onpicked:checkPlanEndTime(this)})"/>
</div>
所以此时我们需要在js中定义函数:
functioncheckPlanStartTime(obj){
if(obj.value!=null&&obj.value!=""&&obj.value!=undefined){
$("#ConstructionPlanAdd").data("bootstrapValidator").updateStatus("planStartTime","NOT_VALIDATED",null).validateField("planStartTime");
}
}
于此同时，需要在页面提交事件加入日期的再次校验
$('#ConstructionPlanAdd').bootstrapValidator({
message:'您输入的值不合法!',
feedbackIcons:{
valid:'glyphiconglyphicon-ok',
invalid:'glyphiconglyphicon-remove',
validating:'glyphiconglyphicon-refresh'
},
//excluded:[":hidden",":disabled",":not(visible)"],//bootstrapValidator的默认配置
excluded:[":disabled"],//关键配置，表示只对于禁用域不进行验证，其他的表单元素都要验证
fields:{
planStartTime:{
message:"计划开始日期必须输入",
validators:{
notEmpty:{
message:"计划开始日期不能为空"
},
date:{
format:"yyyy-MM-dd",
message:"计划开始日期格式不正确"
}
}
},
planEndTime:{
message:"计划结束日期必须输入",
validators:{
notEmpty:{
message:"计划结束日期不能为空"
},
date:{
format:"yyyy-MM-dd",
message:"计划结束日期格式不正确"
}
}
}
},
submitHandler:function(validator,form,submitButton){
ajaxSubmit();
}
});
这样既可完成bootstrapValidator的与my97合体的日期校验。
值得注意的是bootstrapValidator的额外添加数据校验
$("#ConstructionPlanAdd").data("bootstrapValidator").updateStatus("planEndTime","NOT_VALIDATED",null).validateField("planEndTime");
以上所述是小编给大家介绍的BootStrapValidator与My97日期校验的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！