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

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

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

項(xiàng)目場景：

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

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

問題描述

提示：這里描述項(xiàng)目中遇到的問題：

因?yàn)槭褂玫耐獠坎寮?，在調(diào)試過程中出現(xiàn)以下問題：

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

<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)動校驗(yàn)
     $("#dataForm").data("bootstrapValidator").validateField("startTime");//校驗(yàn)結(jié)果無任何反饋
     $("#dataForm").data("bootstrapValidator").validateField("endTime");//校驗(yàn)結(jié)果無任何反饋
  })

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

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

解決方案：

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

完整代碼（“關(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">
		<!--對比組，檢查整體校驗(yàn)是否生效-->
		<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(){//初始化校驗(yàn)規(guī)則
  $("#dataForm").bootstrapValidator({
    fields:{
      devName:{
        validators:{
          notEmpty:{
            message:"必填項(xiàng)不能為空"
          }
        }
      },
      startTime:{
        validators:{
          notEmpty:{
            message:"必填項(xiàng)不能為空"
          },
          checkStartDate:{
            message:"開始日期不能晚于結(jié)束日期"
          }
        }
      },
      endTime:{
        validators:{
          notEmpty:{
            message:"必填項(xiàng)不能為空"
          },
          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)校驗(yàn)無法生效后查找了多方面的資料，也用原生的<input type="datatime"/>試驗(yàn)過，個(gè)人感覺，單獨(dú)使用代碼主動觸發(fā)校驗(yàn)?zāi)稠?xiàng)后，這一項(xiàng)在值改變后不會重復(fù)校驗(yàn)。
操作順序：
①點(diǎn)“提交”按鈕
②開始日期報(bào)“必填項(xiàng)不能為空”
③開始日期和結(jié)束日期填入合法值或非法值
結(jié)果：無論第③步是否輸入合理，輸入框下的錯(cuò)誤提示依舊是“必填項(xiàng)不能為空”
需要重置之前的校驗(yàn)狀態(tài)。

在這里插入圖片描述

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

	  $('#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");//此寫法我本地報(bào)錯(cuò)updateStatus is not a function

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

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

補(bǔ)充：

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

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

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

您可能感興趣的文章: