项目场景：
提示：这里简述项目相关背景：
项目中用到bootstrapValidator，以及laydate（by:贤心，插件效果美观）。
项目表单中，有两处需要联动校验：开始日期，结束日期。
规则：两项必填，开始日期不能晚于结束日期
问题描述
提示：这里描述项目中遇到的问题：
因为使用的外部插件，在调试过程中出现以下问题：
- 单独绑定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");//校验结果无任何反馈
})
- 在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.js | bootstrap.min.js | bootstrapValidator.min.js | laydate.js |
|---|---|---|---|
| v2.1.4 | v3.3.7 | v0.5.3 | v5.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日，但开始框的红色警告依然存在，只有开始日期重选一遍，底下红色警告才消失），所以，也同样需要加重置校验状态语句+代码触发关联框校验，才能实现联动的效果
