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那么您可以将name添加到每个name开头，然后在name的下一个name使用它，如果它为false，则跳过该名称：

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>