主页 / 问题 / 597906
Accepted
drtvader
Asked:2020-12-01 03:28:56 +0000 UTC2020-12-01 03:28:56 +0000 UTC

如何反复检查字段是否输入正确？

  • 772

你好！
如何检查这些输入？
现在它只适用于第一个，需要做什么才能随时检查两者？

<script>
    function formatDate(){
        str = document.getElementById('Date').value;
        var err=[]

        function TstDate(){
            str2=str.split(".");
            if(str2.length!=3){return false;}
            str2=str2[2] +'-'+ str2[1]+'-'+ str2[0];
            if(new Date(str2)=='Invalid Date'){return false;}
            return str;
        }
        var S=TstDate()
        if(S){err.splice(0,1);
           document.getElementById("output").innerHTML = " ";
        } else {
            document.getElementById("output").innerHTML = "Введите правильно дату";
        };
    }
</script>
<div class="input-inner">
    <form>
        <input type="text" id="Date" placeholder="00.00.0000" class="firstDate" name="firstDate" onchange="formatDate(this.value);">
        <input type="text" id="Date" placeholder="00.00.0000" class="secondDate" name="secondDate" onchange="formatDate(this.value);">
    </form>
    <span id="output"></span>
</div>
javascript

3 个回答

  1. 不要大写函数名称，这就是声明类的方式。声明变量时不要忘记写“var”。最重要的是，不要对元素使用相同的 id。它们是那个的标识符，它们必须是唯一的，js 会简单地找到遇到的第一个元素并处理它。以及多个元素的集合，您必须循环运行才能处理每个元素。

    function formatDate() {
  var forms = document.getElementsByClassName('date-form');
  var err = [];

  function testDate(forms) {
    var formsNum = forms.length;
    var ret = 0;

    Array.prototype.slice.call(forms).forEach(function(elem) {
      if (elem.value.split('-').length == 3 && new Date(elem.value) != 'Invalid Date')
        ret++;
    });

    return formsNum == ret;
  }

  document.getElementById('output').innerHTML = testDate(forms) ? '' : 'Введите правильно дату';

  if (testDate(forms)) {
    err.splice(0, 1);

    // Ну и весь остальной код ...
  }
}
    <div class="input-inner">
  <form onchange="formatDate()">
    <input type="date" class="date-form" name="firstDate">
    <input type="date" class="date-form" name="secondDate">
  </form>
  <span id="output"></span>
</div>

    • 1
  2. Best Answer

    document.querySelector('form').addEventListener('input', function (e) {
  var inp = e.target;
  
  if (inp.classList.contains('date')) {
    var lbl = document.querySelector('label[for="' + inp.id + '"]');
    lbl.style.display = isValidDate(inp.value) ? 'none' : 'block';
  }
});

function isValidDate(dd_MM_yyyy) {
  if (!dd_MM_yyyy.match(/^\d+\.\d+\.\d+$/)) {
    return false;
  }
  
  var parts = dd_MM_yyyy.split(".").map(function (x) { return +x });
  
  if (parts.length !== 3 || parts[2] < 1000) {
    return false;
  }
  
  --parts[1]; // Month is 0-based
  var date = new Date(parts[2], parts[1], parts[0]);
  return date.getDate() === parts[0] && date.getMonth() === parts[1] && date.getFullYear() === parts[2];
}
    label {
  display: none;
  color: red;
}
    <form>
  <input type="text" id="firstDate" name="firstDate" placeholder="00.00.0000" class="date">
  <input type="text" id="secondDate" name="secondDate" placeholder="00.00.0000" class="date">
</form>

<label for="firstDate">First date is invalid</label>
<label for="secondDate">Second date is invalid</label>

    • 1

  3. 错误在于输入的当前值被传递给函数，但没有被使用。相反，会尝试获取 id=Date 的输入值。

    由于 javascript 假定 id 在页面上是唯一的，因此总是获得第一个输入。

    相反，有必要使用传递的值，如下所示：

    function formatDate(str) {

  function TstDate() {
    str2 = str.split(".");
    if (str2.length != 3) {
      return false;
    }
    str2 = str2[2] + '-' + str2[1] + '-' + str2[0];
    if (new Date(str2) == 'Invalid Date') {
      return false;
    }
    return str;
  }
  if (TstDate()) {
    document.getElementById("output").innerHTML = " ";
  } else {
    document.getElementById("output").innerHTML = "Введите правильно дату";
  };
}
    <div class="input-inner">
  <form>
    <input type="text" placeholder="00.00.0000" class="firstDate" name="firstDate" onchange="formatDate(this.value);">
    <input type="text" placeholder="00.00.0000" class="secondDate" name="secondDate" onchange="formatDate(this.value);">
  </form>
  <span id="output"></span>
</div>

    • 1

相关问题