javascript - 当用户尚未提交表单数据时，如何防止显示JavaScript错误消息？

当用户尚未提交数据时，如何防止验证错误消息显示在表单中？并且，如何确保仅在数据被验证为不正确的情况下才显示错误消息？

数据是出生日期，格式为dd / mm / yyyy，并使用正则表达式进行了验证。

function myValidator() {
  var userBirthDate = document.getElementById("dob").value;

  var regexVar = /^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
  var regexVarTest = regexVar.test(userBirthDate);

  var userAge = new Date(userBirthDate.replace(regexVar, "$2-$3-$1"));

  var todayDate = (new Date()).getFullYear();

  var cutOff19 = new Date();
  cutOff19.setFullYear(todayDate - 19);

  var cutOff95 = new Date();
  cutOff95.setFullYear(todayDate - 95);

  var errMsg = document.getElementById("error");

  if (!regexVarTest) {
    errMsg.innerHTML = "Enter as dd/mm/yyyy";
  }

    else if (userAge > cutOff19) {
      errMsg.innerHTML = "you have to be older than 19";
    }

    else if (userAge < cutOff95) {
      errMsg.innerHTML = "you have to be younger than 95";
    }

    return userAge;
}

function init() {
  var theForm = document.getElementById("theform");
  theForm.onsubmit = myValidator();

}

window.onload = init;

<p>
  <label for="dob">Birth Date</label>
  <input type="text=" name="dob" id="dob" maxlength="10" placeholder="dd/mm/yyyy" pattern="([0-9]{2})\/([0-9]{2})\/([0-9]{4})" required="required" />
  <span id="error"></span>
</p>

最佳答案

在您的var userBirthDate = document.getElementById("dob").value;之后

将所有DOB验证置于if条件下，如下所示：

function myValidator() {
  var userBirthDate = document.getElementById("dob").value;
  if (userBirthDate) {
    ...
    validation logic
    ...
  }

这样，只有在input中有一些数据时，才会触发您的验证

参考：How to check empty/undefined/null string in JavaScript?