我有一個 php 頁面和這兩個輸入欄位。我的目標是檢查第二個輸入是否等于第一個輸入(實時)并發出錯誤訊息。我到目前為止的代碼是這樣的:
<div class="input-group date" id="timepicker1"
data-target-input="nearest">
<input type="text"
class="form-control datetimepicker-input"
data-target="#timepicker1"
name="FirstDate" id="FirstDate" />
</div>
<div class="input-group date" id="timepicker2"
data-target-input="nearest">
<input type="text" onclick="CheckForErrors()"
class="form-control datetimepicker-input"
data-target="#timepicker2"
name="SecondDate" id="SecondDate" />
</div>
在 php 的最后,我有一個 Javascript 檢查:
<script type="text/javascript">
function CheckForErrors() {
// Check if First Time is equal with second Time
if (FirstDate == SecondDate) {
alert("Error MSG!");
}
return false;
}
</script>
正如你所理解的,它不起作用。有什么幫助嗎?附注。我是初學者所以請耐心等待:D
uj5u.com熱心網友回復:
我稍微改變了你的代碼。首先,我洗掉了 eventListener 的 Tag 行內分配(不好的做法)。然后我檢查每個keyup欄位。它適用于兩個方向。意味著如果您開始在第二個欄位中輸入,它會立即檢查欄位一。反之亦然。
box = document.getElementById('doubleChecker');
box.addEventListener('keyup', (e) => {
const i1 = document.getElementById('timepicker1').children[0]
const i2 = document.getElementById('timepicker2').children[0]
console.log(i1.value , i2.value)
if (i1.value == i2.value) {
alert("Error MSG!");
return false;
}
});
<div id="doubleChecker">
<div class="input-group date" id="timepicker1"
data-target-input="nearest">
<input type="text"
class="form-control datetimepicker-input"
data-target="#timepicker1"
name="FirstDate" id="FirstDate" />
</div>
<div class="input-group date" id="timepicker2"
data-target-input="nearest">
<input type="text"
class="form-control datetimepicker-input"
data-target="#timepicker2"
name="SecondDate" id="SecondDate" />
</div>
</div>
uj5u.com熱心網友回復:
您可以通過 document.querySelector({selector}).value 獲取輸入值。所以你的代碼應該是:
<script type="text/javascript">
function CheckForErrors() {
// Check if First Time is equal with second Time
if (document.querySelector("#FirsDate").value == document.querySelector("#SecondDate").value) {
alert("Error MSG!");
return true;
}
return false;
}
</script>
你也在做你的檢查,如果它是真的,你會顯示錯誤訊息。但是你的函式總是回傳false。在檢查中添加 return true 以停止進一步執行。
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/384939.html
標籤:javascript php 时间选择器 脚本
