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

Question

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

数据是出生日期，格式为 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>

Answer 1

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

之后

将所有 DOB 验证放入 if 条件中，如下

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

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

引用号:How to check empty/undefined/null string in JavaScript?