Javascript 如何验证输入类型=日期字段并显示错误消息，无论该字段是否为空或是否与正则表达式不匹配

几天来，我一直在尝试创建一个函数，用于验证输入类型=Date是否为空以及日期的格式是否正确。我需要以下逻辑和操作：

如果字段为空，则显示错误消息：“*是必需的”

如果字段格式不正确，意味着它不符合以下标准：yyyy-mm-dd和'mm'不超过12和'dd'不超过31，则显示错误消息“*无效日期”

以下是我迄今为止的代码：

HTML

---

我对RegEx是新手，所以这段代码的问题在于，但是，当我在其他代码片段中测试它时，它似乎工作得很好。谢谢你的帮助

对于初学者，我看到您使用的是

input type=text

，但谈论的是

input type=date

因此，如果要使用

input type=date

更改此选项：

<input type="text" id="dateOfBirth" name="dateOfBirth" onfocus="(this.type='date')" onblur="dateOfBirthValdiate()" placeholder="<?php echo date('Y-m-d'); ?>" max="9999-12-31" min="1800-01-01" />

JS:

如果您想要更多，请选择您最喜欢的解决方案

// Date of Birth Validation
function dateOfBirthValdiate () {
    let dateOfBirth = document.forms["registrationForm"]["dateOfBirth"];
    let dateOfBirthErr = document.getElementById("dateOfBirthErr");
    const dateFormat = /^\d{4}[\-\/\s]?((((0[13578])|(1[02]))[\-\/\s]?(([0-2][0-9])|(3[01])))|(((0[469])|(11))[\-\/\s]?(([0-2][0-9])|(30)))|(02[\-\/\s]?[0-2][0-9]))$/;

    if (dateOfBirth.value == "") {
        dateOfBirth.style.border = "2px solid red";
        dateOfBirthErr.innerHTML = "* is required";
    } else if (dateOfBirth.value.match(dateFormat)) {
        dateOfBirth.style.border = "1px solid #ccc";
        dateOfBirthErr.innerHTML = "*";
    } else {
        dateOfBirth.style.border = "2px solid red";
        dateOfBirthErr.innerHTML = "invalid date"


    }
}

<input type="text" id="dateOfBirth" name="dateOfBirth" onfocus="(this.type='date')" onblur="dateOfBirthValdiate()" placeholder="<?php echo date('Y-m-d'); ?>" max="9999-12-31" min="1800-01-01" />

<input type="date" id="dateOfBirth" name="dateOfBirth" onfocus="(this.type='date')" onblur="dateOfBirthValdiate()" placeholder="<?php echo date('Y-m-d'); ?>" max="9999-12-31" min="1800-01-01" />

<form class="" action="index.html" method="post" id="form">
  <input type="date" name="" value="" id="date">
  <input type="text" name="" value="" id="dateText">
  <input type="submit" name="" value="">
</form>

function isDate(date) {
    return (new Date(date) !== "Invalid Date") && !isNaN(new Date(date));
}

document.getElementById('form').addEventListener("submit", e => {
  e.preventDefault();
  var date = document.getElementById('date');
  var dateText = document.getElementById('dateText');
  console.log("Date : " + date.value);
  console.log("dateText : " + dateText.value);
  if (date.value == "" || dateText.value == "") {
    console.log("* is required");
    e.preventDefault();
  } else {
    console.log("Dates filled.");
  }

  if (isDate(dateText.value) && !dateText.value.match("/^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/")) {
    console.log("* invalid date, required format yyyy-mm-dd");
    e.preventDefault();
  } else {
    console.log("Correct Date");
  }
})