脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap校验laydate日期

bootstrap校验laydate起止日期联动失效问题及解决方法

 更新时间：2023年01月06日 14:40:54   作者：weixin_43939111  
这篇文章主要介绍了bootstrap校验laydate起止日期联动失效问题,项目中用到bootstrapValidator，以及laydate（by:贤心，插件效果美观），本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下

项目场景：

提示：这里简述项目相关背景：

项目中用到bootstrapValidator，以及laydate（by:贤心，插件效果美观）。
项目表单中，有两处需要联动校验：开始日期，结束日期。
规则：两项必填，开始日期不能晚于结束日期

问题描述

提示：这里描述项目中遇到的问题：

因为使用的外部插件，在调试过程中出现以下问题：

1.单独绑定input变化监听触发校验失效

<input type="text" class="form-control" id="startTime" name="startTime" autocomplete="off">
//绑定使用laydate元素
  laydate.render({
    elem:'#startTime',
    type:'date',
    trigger:'click',
    done:function(){
    }
  })
  laydate.render({
    elem:'#endTime',
    type:'date',
    trigger:'click',
    done:function(){
    }
  })
  $("#startTime").bind("change",function(){//尝试手动触发联动校验
     $("#dataForm").data("bootstrapValidator").validateField("startTime");//校验结果无任何反馈
     $("#dataForm").data("bootstrapValidator").validateField("endTime");//校验结果无任何反馈
  })

2.在laydate回调函数中手动设置校验有效，但校验不通过后修改值和提交按钮校验都没反应

  laydate.render({
    elem:'#startTime',
    type:'date',
    trigger:'click',
    done:function(){//手动触发联动校验
    	$("#dataForm").data("bootstrapValidator").validateField("startTime");
    	$("#dataForm").data("bootstrapValidator").validateField("endTime");
    }
  })
  $("#subForm").click(()=>{      
    $("#dataForm").data('bootstrapValidator').validate();//不起作用
  }）

解决方案：

在回调函数中增加重置校验

完整代码（“关键代码”已在注释中标出）
1、自定义bootstrapValidator.extend.js文件

$(document).ready(function(){

  $.fn.bootstrapValidator.i18n.orderRange = $.extend($.fn.bootstrapValidator.i18n.orderRange || {}, {
    'default':''
  });
  $.fn.bootstrapValidator.validators.checkStartDate = {//起始日期不晚于结束日期
    validate:function(validator,$field,options){
      var value = $field.val();
      if($("#endTime").val().trim() < value){
        return false
      }else{
        return true
      }
    }
  };
  $.fn.bootstrapValidator.validators.checkEndDate = {//结束日期不早于起始日期
    validate:function(validator,$field,options){
      var value = $field.val();
        if($("#startTime").val().trim() > value){
          return false
        }else{
          return true
        }
    }
  }
})

2、html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<!--以下为主要引入文件-->
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/bootstrapValidator.min.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/laydate/laydate.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/bootstrapValidator.min.js"></script>
  <script src="./js/bootstrapValidator.extend.js"></script>
</head>
<body>
	<form class="form" id="dataForm">
		<!--对比组，检查整体校验是否生效-->
		<div class="form-group">
			<label>名称：</label>
			<input type="text" class="form-control" name="devName" id="devName"/>
		</div>
		<!--联动组-->
		<div class="form-group">
			<label>开始日期：</label>
			<input type="date" class="form-control" name="startTime" id="startTime"/>
		</div>
		<div class="form-group">
			<label>结束日期：</label>
			<input type="date" class="form-control" name="endTime" id="endTime"/>
		</div>
	</form>
	<button id="subForm">提交</button>
</body>
<script>
function initDataForm(){//初始化校验规则
  $("#dataForm").bootstrapValidator({
    fields:{
      devName:{
        validators:{
          notEmpty:{
            message:"必填项不能为空"
          }
        }
      },
      startTime:{
        validators:{
          notEmpty:{
            message:"必填项不能为空"
          },
          checkStartDate:{
            message:"开始日期不能晚于结束日期"
          }
        }
      },
      endTime:{
        validators:{
          notEmpty:{
            message:"必填项不能为空"
          },
          checkStartDate:{
            message:"结束日期不能早于开始日期"
          }
        }
      }
    }
  })
}
initDataForm();
laydate.render({
   elem:'#startTime',
   type:'date',
   trigger:'click',
   done:function(){
	  $('#dataForm').data("bootstrapValidator").resetField("startTime");//关键代码
      $('#dataForm').data("bootstrapValidator").resetField("endTime");//关键代码
      $("#dataForm").data("bootstrapValidator").validateField("startTime");
      $("#dataForm").data("bootstrapValidator").validateField("endTime");
    }
  })
  laydate.render({
    elem:'#endTime',
    type:'date',
    trigger:'click',
    done:function(){
	  $('#dataForm').data("bootstrapValidator").resetField("startTime");//关键代码
      $('#dataForm').data("bootstrapValidator").resetField("endTime");//关键代码
      $("#dataForm").data("bootstrapValidator").validateField("startTime");
      $("#dataForm").data("bootstrapValidator").validateField("endTime");
    }
  })
  $("#subForm").click(()=>{      
    $("#dataForm").data('bootstrapValidator').validate();
  })
</script>

分析：

本例使用到的各版本（css版本省略）：

jquery.min.jsbootstrap.min.jsbootstrapValidator.min.jslaydate.js
v2.1.4v3.3.7v0.5.3v5.0.9

在发现校验无法生效后查找了多方面的资料，也用原生的<input type="datatime"/>试验过，个人感觉，单独使用代码主动触发校验某项后，这一项在值改变后不会重复校验。
操作顺序：
①点“提交”按钮
②开始日期报“必填项不能为空”
③开始日期和结束日期填入合法值或非法值
结果：无论第③步是否输入合理，输入框下的错误提示依旧是“必填项不能为空”
需要重置之前的校验状态。

在这里插入图片描述

通过在触发校验代码处添加前置语句，完美解决了这个问题：

	  $('#dataForm').data("bootstrapValidator").resetField("startTime");//关键代码
      $('#dataForm').data("bootstrapValidator").resetField("endTime");//关键代码
      $("#dataForm").data("bootstrapValidator").validateField("startTime");
      $("#dataForm").data("bootstrapValidator").validateField("endTime");

在这里插入图片描述

可能引入版本不同的原因，我只有resetField和validateField方式才有效
网上还有其他写法，或许在其他版本下会生效，请参考：
重置状态写法：

$("#dateForm").bootstrapValidator("updateStatus",$("#startTime"),"VALID");
//（此写法我本地不起作用）或
$("#dateForm").data("bootstrapValidator").updateStatus("startTime","VALID");//此写法我本地报错updateStatus is not a function

手动触发校验写法：

$("#dataForm").validator($("#startTime"));//此写法我本地报错validator is not a function

补充：

还有一种方式，通过修改css来实现模拟联动，但是在此例中不适用。

  • 对于laydate插件：不会主动触发校验，只能在done中写主动校验代码，然后在输入框内容变化时才能校验。如果不加重置校验状态语句，出现第一次校验不通过后将无法进行二次校验。
  • 对于浏览器自带的<input type="date">，输入框值变化，可触发校验，但是不灵敏（比如，开始选：2023年1月15日，结束选2023年1月10日，此时开始报“不能晚于结束日期”，再将结束选到2023年1月18日，但开始框的红色警告依然存在，只有开始日期重选一遍，底下红色警告才消失），所以，也同样需要加重置校验状态语句+代码触发关联框校验，才能实现联动的效果

到此这篇关于bootstrap校验laydate起止日期联动失效的文章就介绍到这了,更多相关bootstrap校验laydate日期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 浅析JS异步加载进度条

    浅析JS异步加载进度条

    这篇文章主要介绍了JS异步加载进度条 的相关资料,需要的朋友可以参考下
    2016-05-05
  • JS Math对象与Math方法实例小结

    JS Math对象与Math方法实例小结

    这篇文章主要介绍了JS Math对象与Math方法,结合实例形式总结分析了javascript中math对象常用属性与方法相关使用技巧,需要的朋友可以参考下
    2019-07-07
  • js转化毫秒为时间格式代码

    js转化毫秒为时间格式代码

    这篇文章主要介绍了使用js转化毫秒为时间格式的具体实现,需要的朋友可以参考下
    2014-04-04
  • 禁用Enter键表单自动提交实现代码

    禁用Enter键表单自动提交实现代码

    这篇文章主要介绍了禁用Enter键表单自动提交实现代码,需要的朋友可以参考下
    2014-05-05
  • 详解V8是如何执行一段JavaScript代码原理

    详解V8是如何执行一段JavaScript代码原理

    这篇文章主要为大家介绍了详解V8是如何执行一段JavaScript代码原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • js实现颜色阶梯渐变效果（Gradient算法）

    js实现颜色阶梯渐变效果（Gradient算法）

    在色彩中，色相、明度、纯度也都可以产生渐变效果，并会表现出具有丰富层次的美感。本文主要讲述两种颜色RGB数值的梯级渐变算法。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript制作3D旋转相册

    JavaScript制作3D旋转相册

    这篇文章主要为大家详细介绍了JavaScript制作3D旋转相册，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • JS非空验证及邮箱验证的实例

    JS非空验证及邮箱验证的实例

    下面小编就为大家带来一篇JS非空验证及邮箱验证的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JS中利用localStorage防止页面动态添加数据刷新后数据丢失

    JS中利用localStorage防止页面动态添加数据刷新后数据丢失

    本文给大家分享一段js代码利用利用localStorage防止页面动态添加数据刷新后数据丢失问题，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
    2017-03-03
  • JS中splice添加或删除数组元素

    JS中splice添加或删除数组元素

    本文主要介绍了JS中splice添加或删除数组元素,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-12-12

最新评论