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日期校验的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)

    本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化 提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h

  • JS组件Form表单验证神器BootstrapValidator

    本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc

  • BootstrapValidator不触发校验的实现代码

    一.前言 BootstrapValidator是基于bootstrap3的jquery表单验证插件,是最适合bootstrap框架的表单验证插件,在工作中用到此框架就写下自己在使用中积累的一些心得 二.问题描述 当按钮的类型为submit时,使用bootstrapValidator的isValid()能够使验证表单正常工作,但当button的type类型为button时,只调用bootstrapValidator的isValid()方法无法正常工作.这时候就需要使用bootstrapValida

  • 基于jQuery 实现bootstrapValidator下的全局验证

    BootstrapValidator 是一款专门针对Boostrap v3的表单检验jQuery插件,能够实现众多常用的检验功能,并且易于扩展,还支持中文!对于bootstrap用户来说能够开箱即用. 前置: 引入jQuery.bootstrap.bootstrapValidator 问题描述: 项目中要求所有的表单输入框中都不能输入&符号.没有在bootstrap中找到有方法可用,只能自己动手了 思路: 使用正则. 分两种情况,第一种,如果输入框有自身的正则验证则不用去管(一般来说使用正则验证

  • 实用又漂亮的BootstrapValidator表单验证插件

    本文推荐一款twitter做的bootstrapValidator.js,本身bootstrap就是twitter做的,那么使用原配的validator也就更值得信赖.从百度上搜bootstrapValidator会出现很多款,但我只推荐这款: 一.一睹为快 为了简便的介绍,这里只做为空的check. BootstrapValidator官方下载地址 二.资源引用 下载完资源包后,你可以看到如下的目录. 然后把以下三个文件引入到你项目. <link type="text/css"

  • Bootstrapvalidator校验、校验清除重置的实现代码(推荐)

    1.引入css与js bootstrapValidator.min.css bootstrapValidator.min.js 2.html中的modal代码 <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true&q

  • 使用bootstrap validator的remote验证代码经验分享(推荐)

    这里需要说一下,bootstrapvalidator的帮助文档写的比较简单,对于remote验证器的说明更是如此,在经历多方测试之后才明白如何使用这个验证器. 一个典型的ajax验证代码如下: 服务端验证代码(使用spring mvc)如下: /* * 返回String类型的结果 * 检查用户名的合法性,如果用户已经存在,返回false,否则返回true(返回json数据,格式为{"valid",true}) */ @RequestMapping(value = "/chec

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

    首先my97的API中有自定义事件中有 onpicking 和 onpicked 事件 .onclearing 和 oncleared 事件.年月日时分秒的 changing和changed. 我的html页面中需要展示的日期样子是: <label class="col-xs-2 control-label" for="ConstructionPlanAdd_planStartTime">开始时间:</label> <div class

  • AngularJs表单校验功能实例代码

    废话不多说了,具体代码如下所示: <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> <meta charset="UTF-8"> <title>angular表单校验</title> <link rel="stylesheet" href="../css/bootstrap.min.cs

  • JavaScript判断日期时间差的实例代码

    js判断日期时间的代码如下所示: alert(GetDateDiff("2018-02-27 19:20:22","2018-02-27 09:20:22","hour")); function GetDateDiff(startTime, endTime, diffType) { //将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式 startTime = startTime.replace(/\-/g, "/&q

  • spring boot+自定义 AOP 实现全局校验的实例代码

    最近公司重构项目,重构为最热的微服务框架 spring boot, 重构的时候遇到几个可以统一处理的问题,也是项目中经常遇到,列如:统一校验参数,统一捕获异常... 仅凭代码 去控制参数的校验,有时候是冗余的,但通过框架支持的 去控制参数的校验,是对于开发者很友好,先看下面的例子 @NotEmpty(message="手机号不能为空") @Size(min=11,max=11,message="手机号码长度不正确") @Pattern(regexp=StringUt

  • python 日期排序的实例代码

    问题1:如果日期中有千年以前的情况(没法用格式化函数),如('2010-11-23','1989-3-7','2010-1-5','978-12-1','2010-2-4')参照方法1 问题2:如果日期中没有千年以前的情况,做法就很多了.参照方法2和方法3 # -*- coding: utf-8 -*- import time from operator import itemgetter arr=('2010-11-23','1989-3-7','2010-1-5','978-12-1','2

  • php获取本年、本月、本周时间戳和日期格式的实例代码

    时间戳格式: //获取今日开始时间戳和结束时间戳 $beginToday=mktime(0,0,0,date('m'),date('d'),date('Y')); $endToday=mktime(0,0,0,date('m'),date('d')+1,date('Y'))-1; //获取昨日起始时间戳和结束时间戳 $beginYesterday=mktime(0,0,0,date('m'),date('d')-1,date('Y')); $endYesterday=mktime(0,0,0,d

  • Spring Boot 实现字段唯一校验功能(实例代码)

    目录 1 Maven依赖 2 实现代码 2.1 UniqueCheck 2.2 UniqueCheckDetail 2.3 UniqueCheckArgs 2.4 UniqueCheckService 2.5 AbstractUniqueCheckService 3 调试代码 3.1 UserCheckArgs 3.2 UserUniqueCheckVo 3.3 UserUniqueCheckService 3.4 UniqueCheckEnum 3.5 单元测试代码 4 调试结果 注: 1 M

  • Vue中常用rules校验规则(实例代码)

    在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法.如果错误欢迎指出,后期不断补充更新. 1.是否合法IP地址 export function validateIP(rule, value,callback) { if(value==''||value==undefined||value==null){ callback(); }else { const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|

  • js实现时间日期校验

    本文实例为大家分享了js实现时间日期校验的具体代码,供大家参考,具体内容如下 1. 通用的时间校验方式 $.validator.addMethod("validatestart", function(value, element) { var start = new Date($('#startTime').val()).getTime(); var end = new Date($('#endTime').val()).getTime(); if(end < start){ r

  • bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码

    注意:jQuery报 Maximum call stack size exceeded 错误描述:超出最大调用堆栈大小 错误原因:内部形成递归 解决方案: html 写法不规范,更改 html 写法,可参考官网示例,或下面代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" conte

随机推荐