限制将输入字段与另一个字段进行比较

Question

我有一个 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>

如您所知，它不起作用。有什么帮助吗？ PS。我是初学者所以请耐心等待:D

Answer 1

您可以通过 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>

你也在做检查，如果是真的，你会显示错误信息。但是你的函数总是 returns false。在检查中添加 return true 以停止进一步执行。

Answer 2

我稍微更改了您的代码。首先，我删除了 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>

限制将输入字段与另一个字段进行比较

Restrict live an input field comparing it to another field

javascript

php

timepicker

script