JavaScript 表单验证 - 日期

Question

我的学校给了我一周的时间来学习 JavaScript。我们从表单验证开始。

我能够成功找出姓名和电子邮件地址，但无法添加所需的日期验证。

到目前为止我的代码：

function formValidator() {
  // Make quick references to our fields
  var name = document.getElementById('name');
  var email = document.getElementById('email');

  // Check each input in the order that it appears in the form!
  if (isAlphabet(name, "Please enter only letters for your name")) {
    if (emailValidator(email, "Please enter a valid email address")) {
      return true;
    }
  }
  return false;
}

function notEmpty(elem, helperMsg) {
  if (elem.value.length == 0) {
    alert(helperMsg);
    elem.focus(); // set the focus to this input
    return false;
  }
  return true;
}

function isNumeric(elem, helperMsg) {
  var numericExpression = /^[0-9]+$/;
  if (elem.value.match(numericExpression)) {
    return true;
  } else {
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

function isAlphabet(elem, helperMsg) {
  var alphaExp = /^[a-zA-Z]+$/;
  if (elem.value.match(alphaExp)) {
    return true;
  } else {
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

function isAlphanumeric(elem, helperMsg) {
  var alphaExp = /^[0-9a-zA-Z]+$/;
  if (elem.value.match(alphaExp)) {
    return true;
  } else {
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

function lengthRestriction(elem, min, max) {
  var uInput = elem.value;
  if (uInput.length >= min && uInput.length <= max) {
    return true;
  } else {
    alert("Please enter between " + min + " and " + max + " characters");
    elem.focus();
    return false;
  }
}

function madeSelection(elem, helperMsg) {
  if (elem.value == "Please Choose") {
    alert(helperMsg);
    elem.focus();
    return false;
  } else {
    return true;
  }
}

function emailValidator(elem, helperMsg) {
  var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
  if (elem.value.match(emailExp)) {
    return true;
  } else {
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

//javascriptkit.com/script/script2/validatedate.shtml


function checkdate(input) {
  var validformat = /^\d{2}\/\d{2}\/\d{4}$/ //Basic check for format validity
  var returnval = false
  if (!validformat.test(input.value))
    alert("Invalid Date Format. Please correct and submit again.")
  else { //Detailed check for valid date ranges
    var monthfield = input.value.split("/")[0]
    var dayfield = input.value.split("/")[1]
    var yearfield = input.value.split("/")[2]
    var dayobj = new Date(yearfield, monthfield - 1, dayfield)
    if ((dayobj.getMonth() + 1 != monthfield) || (dayobj.getDate() != dayfield) || (dayobj.getFullYear() != yearfield))
      alert("Invalid Day, Month, or Year range detected. Please correct and submit again.")
    else
      returnval = true
  }
  if (returnval == false) input.select()
  return returnval
}

<div id="form">
  <h1>Questions? Contact Us!</h1>
  <form onsubmit='return formValidator()'>
    <label for="name">Name:</label>
    <input type='text' id='name' /><br />
    <label for="email">Email:</label>
    <input type='text' id='email' /><br />
    <label for="date">Date: </label>
    <input type="text" id="date" required /> <br>
    <label for="message">Question:</label>
    <textarea name="message" rows="8" cols="20" required>Please make sure your question is at least five words.</textarea> <br>
    <input type='submit' value='Check Form' />
  </form>
</div>

我想我应该更改功能检查日期，但我不确定该怎么做。

谢谢。

Answer 1

在您的函数中连接日期验证。formValidator - 我修改了该函数以使用 isValid 以避免大量嵌套验证。 如果您想一次只使用一个，从 name 开始，您也可以在下一个使用它，将其添加到每个的开头，如果它是错误的，它会跳过：

if (isValid && !emailValidator(email, "Please enter a valid email address"))

注意!emailValidator 上添加的! 表示如果失败则将isValid 设为false。

function formValidator() {
  // Make quick references to our fields
  var name = document.getElementById('name');
  var email = document.getElementById('email');
  var mydate = document.getElementById('date'); // add this one
  var isValid = true; //added this (form level valid true/false)

  // Check each input in the order that it appears in the form!
  if (!isAlphabet(name, "Please enter only letters for your name")) {
    isValid = false;
  }

  if (!emailValidator(email, "Please enter a valid email address")) {
    isValid = false;
  }
  // check the date
  if (!checkdate(mydate)) {
    isValid = false;
    alert("bad date " + mydate.value);
  }
  return isValid;
}

function notEmpty(elem, helperMsg) {
  if (elem.value.length == 0) {
    alert(helperMsg);
    elem.focus(); // set the focus to this input
    return false;
  }
  return true;
}

function isNumeric(elem, helperMsg) {
  var numericExpression = /^[0-9]+$/;
  if (elem.value.match(numericExpression)) {
    return true;
  } else {
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

function isAlphabet(elem, helperMsg) {
  var alphaExp = /^[a-zA-Z]+$/;
  if (elem.value.match(alphaExp)) {
    return true;
  } else {
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

function isAlphanumeric(elem, helperMsg) {
  var alphaExp = /^[0-9a-zA-Z]+$/;
  if (elem.value.match(alphaExp)) {
    return true;
  } else {
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

function lengthRestriction(elem, min, max) {
  var uInput = elem.value;
  if (uInput.length >= min && uInput.length <= max) {
    return true;
  } else {
    alert("Please enter between " + min + " and " + max + " characters");
    elem.focus();
    return false;
  }
}

function madeSelection(elem, helperMsg) {
  if (elem.value == "Please Choose") {
    alert(helperMsg);
    elem.focus();
    return false;
  } else {
    return true;
  }
}

function emailValidator(elem, helperMsg) {
  var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
  if (elem.value.match(emailExp)) {
    return true;
  } else {
    alert(helperMsg);
    elem.focus();
    return false;
  }
}

//javascriptkit.com/script/script2/validatedate.shtml


function checkdate(input) {
  var validformat = /^\d{2}\/\d{2}\/\d{4}$/ //Basic check for format validity
  var returnval = false;
  if (!validformat.test(input.value)) {
    alert("Invalid Date Format. Please correct and submit again.");
  } else { //Detailed check for valid date ranges
    var monthfield = input.value.split("/")[0];
    var dayfield = input.value.split("/")[1];
    var yearfield = input.value.split("/")[2];
    var dayobj = new Date(yearfield, monthfield - 1, dayfield);
    if ((dayobj.getMonth() + 1 != monthfield) || (dayobj.getDate() != dayfield) || (dayobj.getFullYear() != yearfield)) {
      alert("Invalid Day, Month, or Year range detected. Please correct and submit again.");
    } else {
      returnval = true;
    }
  }
  if (returnval == false) {
    input.select();
  }
  return returnval;
}

<div id="form">
  <h1>Questions? Contact Us!</h1>
  <form onsubmit='return formValidator()'>
    <label for="name">Name:</label>
    <input type='text' id='name' /><br />
    <label for="email">Email:</label>
    <input type='text' id='email' /><br />
    <label for="date">Date: </label>
    <input type="text" id="date" required /> <br>
    <label for="message">Question:</label>
    <textarea name="message" rows="8" cols="20" required>Please make sure your question is at least five words.</textarea> <br>
    <input type='submit' value='Check Form' />
  </form>
</div>