脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → bootstrapvalidator

BootStrapValidator与My97日期校验的实例代码

 更新时间：2017年01月22日 15:05:14   作者：wangwo1991  
这篇文章给大家介绍了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日期校验的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • Android存储字符串数据到txt文件

    Android存储字符串数据到txt文件

    这篇文章主要为大家详细介绍了Android存储字符串数据到txt文件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • android编程实现对话框的封装实例

    android编程实现对话框的封装实例

    这篇文章主要介绍了android编程实现对话框的封装,以实例形式分析了Android针对对话框的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • Android为应用添加数字角标的简单实现

    Android为应用添加数字角标的简单实现

    应用的角标是用来标记有多少条提醒没读，本篇文章主要介绍了Android为应用添加角标的简单实现，有兴趣的可以了解一下。
    2017-04-04
  • flutter 输入框组件TextField的实现代码

    flutter 输入框组件TextField的实现代码

    这篇文章主要介绍了flutter 输入框组件TextField的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • Android自定义控件案例汇总1（菜单、popupwindow、viewpager）

    Android自定义控件案例汇总1（菜单、popupwindow、viewpager）

    这篇文章主要介绍了Android自定义控件案例汇总，优酷菜单、popupwindow实现下拉列表、viewpager实现轮播图,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Android Material设计中列表和卡片的创建方法解析

    Android Material设计中列表和卡片的创建方法解析

    这篇文章主要介绍了Android Material设计中列表和卡片的创建方法解析,列表和卡片是Material Design视图中的重要部分,需要的朋友可以参考下
    2016-04-04
  • 浅谈Android app开发中Fragment的Transaction操作

    浅谈Android app开发中Fragment的Transaction操作

    这篇文章主要介绍了Android app开发中Fragment的Transaction操作,包括Transaction和Fragment的生命周期的联系等内容,需要的朋友可以参考下
    2016-02-02
  • Android NavigationBar问题处理的方法

    Android NavigationBar问题处理的方法

    本篇文章主要介绍了Android NavigationBar问题处理的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Android自定义仿微信PopupWindow效果

    Android自定义仿微信PopupWindow效果

    这篇文章主要为大家详细介绍了Android自定义仿微信PopupWindow效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • Android实现View滑动的几种方式

    Android实现View滑动的几种方式

    Android中的View类是所有UI控件的基类（Base class），也就是说我们平时所有到的各种UI控件，比如Button、ImagView等等都继承自View类。这篇文章主要为大家详细介绍了Android实现View滑动的几种方式,需要的朋友可以参考下
    2016-04-04

最新评论