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>