限制实时输入字段，将其与另一个字段进行比较答案

【问题标题】：Restrict live an input field comparing it to another field限制实时输入字段，将其与另一个字段进行比较
【发布时间】：2021-12-18 10:42:21
【问题描述】：

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

【问题讨论】：

根据代码，您直接使用变量而不获取它们的输入值。也使用 On Change 事件而不是第二个文本框上的 Click 事件。您需要编写 JS 代码，例如： function CheckForErrors() { // 检查 First Time 是否等于 second Time var FirstDate document.getElementById("FirstDate").value; var SecondDate document.getElementById("SecondDate").value; if (FirstDate == SecondDate) { alert("错误信息！"); } 返回假； }

标签： javascript php timepicker script

【解决方案1】：

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

【讨论】：

第一个窗口是脚本，也是第一个窗口，因为它应该在 php 代码之上？因为它仍然对我不起作用......
@user14631143 你的代码中没有 PHP 吗？你有 html 和 javascript。可能你用 php 生成 html。但它不会影响 javascript 检查。工作流程是：php 生成 html 并将其发送给客户端。客户开始打字。 javascript 立即检查这两个字段。如果相等，则显示警报和其他内容，以避免用户发送表单。如果他可以通过 javscript chech，您必须在服务器端检查这些字段是否再次加倍。
@user14631143 你明白了吗？
不。我做了一个更简单的例子来理解什么是错的..

【解决方案2】：

您可以通过 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 以停止进一步执行。

【讨论】：