bootstrapValidator与My97日期校验

本文主要是介绍bootstrapValidator与My97日期校验，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

    首先my97的API中有自定义事件中有 onpicking 和 onpicked 事件 、onclearing 和 oncleared 事件、年月日时分秒的 changing和changed

   我的html页面中需要展示的日期样子是:

<label class="col-xs-2 control-label" for="ConstructionPlanAdd_planStartTime">开始时间:</label><div class="col-xs-4"><input class="form-control input-sm Wdate" id="ConstructionPlanAdd_planStartTime" name="planStartTime" type="text" placeholder="请选择开始时间" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'ConstructionPlanAdd_planEndTime\');}',dateFmt:'yyyy-MM-dd',readOnly:true})"/></div><label class="col-xs-2 control-label" for="ConstructionPlanAdd_planEndTime">结束日期:</label><div class="col-xs-4"><input class="form-control input-sm Wdate" 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 事件。代码变成这样:

<label class="col-xs-2 control-label" for="ConstructionPlanAdd_planStartTime">开始时间:</label><div class="col-xs-4"><input class="form-control input-sm Wdate" 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><label class="col-xs-2 control-label" for="ConstructionPlanAdd_planEndTime">结束日期:</label><div class="col-xs-4"><input class="form-control input-sm Wdate" 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中定义函数:

function checkPlanStartTime(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: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-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日期校验的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---