bootstrap校驗laydate起止日期聯(lián)動失效問題及解決方法

更新時間：2023年01月06日 14:40:54 作者：weixin_43939111

這篇文章主要介紹了bootstrap校驗laydate起止日期聯(lián)動失效問題,項目中用到bootstrapValidator，以及l(fā)aydate（by:賢心，插件效果美觀），本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下

項目場景：

提示：這里簡述項目相關(guān)背景：

項目中用到bootstrapValidator，以及l(fā)aydate（by:賢心，插件效果美觀）。
項目表單中，有兩處需要聯(lián)動校驗：開始日期，結(jié)束日期。
規(guī)則：兩項必填，開始日期不能晚于結(jié)束日期

問題描述

提示：這里描述項目中遇到的問題：

因為使用的外部插件，在調(diào)試過程中出現(xiàn)以下問題：

1.單獨綁定input變化監(jiān)聽觸發(fā)校驗失效

<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(){//嘗試手動觸發(fā)聯(lián)動校驗
     $("#dataForm").data("bootstrapValidator").validateField("startTime");//校驗結(jié)果無任何反饋
     $("#dataForm").data("bootstrapValidator").validateField("endTime");//校驗結(jié)果無任何反饋
  })

2.在laydate回調(diào)函數(shù)中手動設(shè)置校驗有效，但校驗不通過后修改值和提交按鈕校驗都沒反應(yīng)

  laydate.render({
    elem:'#startTime',
    type:'date',
    trigger:'click',
    done:function(){//手動觸發(fā)聯(lián)動校驗
    	$("#dataForm").data("bootstrapValidator").validateField("startTime");
    	$("#dataForm").data("bootstrapValidator").validateField("endTime");
    }
  })
  $("#subForm").click(()=>{      
    $("#dataForm").data('bootstrapValidator').validate();//不起作用
  }）

解決方案：

在回調(diào)函數(shù)中增加重置校驗

完整代碼（“關(guān)鍵代碼”已在注釋中標(biāo)出）
1、自定義bootstrapValidator.extend.js文件

$(document).ready(function(){

  $.fn.bootstrapValidator.i18n.orderRange = $.extend($.fn.bootstrapValidator.i18n.orderRange || {}, {
    'default':''
  });
  $.fn.bootstrapValidator.validators.checkStartDate = {//起始日期不晚于結(jié)束日期
    validate:function(validator,$field,options){
      var value = $field.val();
      if($("#endTime").val().trim() < value){
        return false
      }else{
        return true
      }
    }
  };
  $.fn.bootstrapValidator.validators.checkEndDate = {//結(jié)束日期不早于起始日期
    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>
		<!--聯(lián)動組-->
		<div class="form-group">
			<label>開始日期：</label>
			<input type="date" class="form-control" name="startTime" id="startTime"/>
		</div>
		<div class="form-group">
			<label>結(jié)束日期：</label>
			<input type="date" class="form-control" name="endTime" id="endTime"/>
		</div>
	</form>
	<button id="subForm">提交</button>
</body>
<script>
function initDataForm(){//初始化校驗規(guī)則
  $("#dataForm").bootstrapValidator({
    fields:{
      devName:{
        validators:{
          notEmpty:{
            message:"必填項不能為空"
          }
        }
      },
      startTime:{
        validators:{
          notEmpty:{
            message:"必填項不能為空"
          },
          checkStartDate:{
            message:"開始日期不能晚于結(jié)束日期"
          }
        }
      },
      endTime:{
        validators:{
          notEmpty:{
            message:"必填項不能為空"
          },
          checkStartDate:{
            message:"結(jié)束日期不能早于開始日期"
          }
        }
      }
    }
  })
}
initDataForm();
laydate.render({
   elem:'#startTime',
   type:'date',
   trigger:'click',
   done:function(){
	  $('#dataForm').data("bootstrapValidator").resetField("startTime");//關(guān)鍵代碼
      $('#dataForm').data("bootstrapValidator").resetField("endTime");//關(guān)鍵代碼
      $("#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");//關(guān)鍵代碼
      $('#dataForm').data("bootstrapValidator").resetField("endTime");//關(guān)鍵代碼
      $("#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

在發(fā)現(xiàn)校驗無法生效后查找了多方面的資料，也用原生的<input type="datatime"/>試驗過，個人感覺，單獨使用代碼主動觸發(fā)校驗?zāi)稠椇?，這一項在值改變后不會重復(fù)校驗。
操作順序：
①點“提交”按鈕
②開始日期報“必填項不能為空”
③開始日期和結(jié)束日期填入合法值或非法值
結(jié)果：無論第③步是否輸入合理，輸入框下的錯誤提示依舊是“必填項不能為空”
需要重置之前的校驗狀態(tài)。

在這里插入圖片描述

通過在觸發(fā)校驗代碼處添加前置語句，完美解決了這個問題：

	  $('#dataForm').data("bootstrapValidator").resetField("startTime");//關(guān)鍵代碼
      $('#dataForm').data("bootstrapValidator").resetField("endTime");//關(guān)鍵代碼
      $("#dataForm").data("bootstrapValidator").validateField("startTime");
      $("#dataForm").data("bootstrapValidator").validateField("endTime");

在這里插入圖片描述

可能引入版本不同的原因，我只有resetField和validateField方式才有效
網(wǎng)上還有其他寫法，或許在其他版本下會生效，請參考：
重置狀態(tài)寫法：

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

手動觸發(fā)校驗寫法：

$("#dataForm").validator($("#startTime"));//此寫法我本地報錯validator is not a function

補充：

還有一種方式，通過修改css來實現(xiàn)模擬聯(lián)動，但是在此例中不適用。

對于laydate插件：不會主動觸發(fā)校驗，只能在done中寫主動校驗代碼，然后在輸入框內(nèi)容變化時才能校驗。如果不加重置校驗狀態(tài)語句，出現(xiàn)第一次校驗不通過后將無法進行二次校驗。
對于瀏覽器自帶的<input type="date">，輸入框值變化，可觸發(fā)校驗，但是不靈敏（比如，開始選：2023年1月15日，結(jié)束選2023年1月10日，此時開始報“不能晚于結(jié)束日期”，再將結(jié)束選到2023年1月18日，但開始框的紅色警告依然存在，只有開始日期重選一遍，底下紅色警告才消失），所以，也同樣需要加重置校驗狀態(tài)語句+代碼觸發(fā)關(guān)聯(lián)框校驗，才能實現(xiàn)聯(lián)動的效果

到此這篇關(guān)于bootstrap校驗laydate起止日期聯(lián)動失效的文章就介紹到這了,更多相關(guān)bootstrap校驗laydate日期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: