温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

在BootStrap项目中使用Validator与My97实现一个日期校验功能

发布时间:2020-11-20 16:15:42 来源:亿速云 阅读:275 作者:Leah 栏目:移动开发

这期内容当中小编将会给大家带来有关在BootStrap项目中使用Validator与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"); 

上述就是小编为大家分享的在BootStrap项目中使用Validator与My97实现一个日期校验功能了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI