JavaScript表单验证-数组中的复选框，输入的第一位

Question

使用Java脚本验证申请表时，我遇到了很多问题。

1. validatePostCode：从选择框中获取值，然后根据选择的内容，检查邮政编码的第一个值是否与设置的验证匹配。 我尝试了.charAt（0），但即使正确，它仍然显示错误消息。

2. validateTextBox：如果选中“ otherskills”复选框，则文本框不能为空。 正如您在html中看到的那样，我的复选框使用数组，但我不知道仅获得“ otherskills”的价值

谢谢

 "use strict"; var errMsg = ""; /*get variables from form and check rules*/ function validate(){ var result = true; result = validateDOB() && validatePostCode() && validateTextBox() && validateJobReferenceNumber(); if (errMsg != ""){ //only display message box if there is something to show alert(errMsg); } return result; } function validateDOB(){ var dob = document.forms["regForm"]["dob"].value; var age = getAge(dob); var error = document.getElementById("spanDob"); var pattern =/^([0-9]{2})\\/([0-9]{2})\\/([0-9]{4})$/; if (dob == null || dob == "" || !pattern.test(dob) || age < 15 || age > 80) { error.textContent = "Please enter a valid date of birth\\n"; return false; } else { return true; } } function getAge(dob) { /* find age from today's date minus entered DOB*/ var today = new Date(); var birthDate = new Date(dob); var age = today.getFullYear() - birthDate.getFullYear(); var m = today.getMonth() - birthDate.getMonth(); if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) { age--; } return age; } function validatePostCode(){ var postcode = document.forms["regForm"]["postcode"].value; var state = document.forms["regForm"]["state"].value; var error = document.getElementById("spanPostcode"); switch (state){ case "VIC": if (postcode.charAt(0) !== 3 || postcode.charAt(0) !== 8){ error.textContent = "Please enter a valid post code for VIC"; return false; } break; case "NSW": if (postcode.charAt(0) !== 1 || postcode.charAt(0) !== 2){ error.textContent = "Please enter a valid post code for NSW" return false; } break; case "QLD": if (postcode.charAt(0) !== 4 || postcode.charAt(0) !== 9){ error.textContent = "Please enter a valid post code for QLD" return false; } break; case "NT": if (postcode.charAt(0) !== 0){ error.textContent = "Please enter a valid post code for NT" return false; } break; case "WA": if (postcode.charAt(0) !== 6){ error.textContent = "Please enter a valid post code for WA" return false; } break; case "SA": if (postcode.charAt(0) !== 5){ error.textContent = "Please enter a valid post code for SA" return false; } break; case "TAS": if (postcode.charAt(0) !== 7){ error.textContent = "Please enter a valid post code for TAS" return false; } break; case "ACT": if (postcode.charAt(0) !== 0) { error.textContent = "Please enter a valid post code for ACT" return false; } break; default: error.textContent = "Please enter a valid post code"; return false; } return true; } function validateTextBox(){ var checkboxOtherSkills = document.getElementById("skills[]").getElementsByTagName("input"); var textbox = document.forms["regForm"]["otherSkills"].value; if (checkboxOtherSkills[oSkills].checked){ if (textbox.length < 1){ errMsg +="'Other Skills' has been selected but not filled out."; return false; } } return true; } function validateJobReferenceNumber(){ var refnumb = document.getElementById("jobrefno"); var pattern = (/([a-zA-Z0-9_-]){6}$/); if (!pattern.test(refnumb)){ errMsg += "6 alphanumeric characters only"; return false; } return true; } function init(){ var regForm = document.getElementById("regForm");// get ref to the HTML element regForm.onsubmit = validate; } window.onload = init; 

 <form id="regForm" method="post" action="http://mercury.ict.swin.edu.au/it000000/formtest.php" novalidate="novalidate"> <fieldset><legend>Application:</legend> <!--Job Reference Number--> <p><label for="jobrefno">Job Reference Number</label> <input type="text" name="jobrefno" id="jobrefno" pattern="[a-zA-Z0-9]{6}" title="Must be 6 characters" required="required" /><span id="spanJobRefNo"></span></p> <!--First Name--> <p><label for="firstName">First Name</label> <input type="text" name="firstName" id="firstName" pattern="[a-zA-Z]+${1,25}" maxlength="25" title="Max Length 25" required="required" /><span id="spanFirstName"></span></p> <!--Last Name--> <p><label for="lastName">Last Name</label> <input type="text" name="lastName" id="lastName" pattern="[a-zA-Z ]+${1,25}" maxlength="25" title="Max Length 25" required="required" /><span id="spanLastName"></span></p> <!--Date of Birth--> <p><label for="dob">Date of Birth</label> <input type="text" name="dob" id="dob" required="required" placeholder="dd/mm/yyyy"/><span id="spanDob"></span></p> <!--Gender--> <fieldset><legend>Gender</legend></span> <p><label> <input type="radio" name="gender" value="Unspecified" checked="checked"/>Prefer not to say</label> <label><input type="radio" name="gender" value="Female" />Female</label> <label><input type="radio" name="gender" value="Male" />Male</label></p> <span id="spanGender"></fieldset> <!--Street Address--> <p><label for="streetAddress">Street Address</label> <input type="text" name="streetAddress" id="streetAddress" maxlength="40" title="Max Length 40" required="required" /><span id="spanStreetAddress"></span></p> <!--Suburb--> <p><label for="suburb">Suburb</label> <input type="text" name="suburb" id="suburb" maxlength="40" title="Max Length 40" required="required" /><span id="spanSuburb"></span></p> <!--State--> <p><label for="state">State</label> <select required ="required" name="state" id="state"> <option value="" selected="selected">Please Select</option> <option value="VIC">VIC</option> <option value="NSW">NSW</option> <option value="QLD">QLD</option> <option value="NT">NT</option> <option value="WA">WA</option> <option value="SA">SA</option> <option value="TAS">TAS</option> <option value="ACT">ACT</option> </select> <span id="spanState"></span> </p> <!--Postcode--> <p><label for="postcode">PostCode</label> <input type="text" name="postcode" id="postcode" pattern="[0-9]{4}" maxlength="4" title="4 Digits only" required="required" /><span id="spanPostcode"></span> <!--Email address--> <p><label for="email">Email</label> <input type="email" name="email" id="email" placeholder="youremail@host.com" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\\.[az]{2,4}$" title="Please use correct format: eg. mrburns@hotmail.com" required="required" /><span id="spanEmail"></span></p> <!--Phone Number--> <p><label for="phoneNumber">Phone Number</label> <input type="text" name="phoneNumber" id="phoneNumber" pattern="[0-9]+{8,12}" maxlength = "12" title="8-12 Digits" required="required" /><span id="spanPhoneNumber"></span> </p> <!--Skill List--> <label>Skills List</label><br> <label><input type="checkbox" name="skills[]" value="HTML5" checked="checked" />HTML5</label><br> <label><input type="checkbox" name="skills[]" value="CSS" />CSS</label><br> <label><input type="checkbox" name="skills[]" value="JavaScript">JavaScript</label><br> <label><input type="checkbox" name="skills[]" value="Excel" />Excel</label><br> <label><input type="checkbox" name="skills[]" value="MySQL" />MySQL</label><br> <label><input type="checkbox" name="skills[]" value="Administration" />Administration</label><br> <label><input type="checkbox" name="skills[]" value="12MoExp" />12 Months Experience</label><br> <label><input type="checkbox" name="skills[]" id ="oSkills" value="OtherSkills" />Other Skills...</label><br> <!--Other Skills--> <p><label for="otherSkills">Other Skills</label> <span id="spanOtherSkills"></span><br> <textarea id="otherSkills" name="otherSkills" rows="10" cols="50" placeholder="Please tell us about any other skills you have that may benefit you in this position"></textarea></p> </fieldset> <p> <input type= "submit" value="Apply"/> <input type= "reset" value="Reset Form"/></p> </form> 

Answer 1

validatePostCode：从选择框中获取值，然后根据选择的内容，检查邮政编码的第一个值是否与设置的验证匹配。 我尝试了.charAt（0），但即使正确，它仍然显示错误消息。

这是因为您将postcode.charAt(0) （是一个字符串）与一个数字进行了比较。 您可以执行postcode.charAt(0) !== "1"代替postcode.charAt(0) !== 1 （请注意， "1"现在也是字符串）

---

现在关于validateTextBox

选择器document.getElementById("skills[]")返回null，因为没有id为“ skills []”的元素。

您所需的复选框的ID为“ oSkills”，因此您可以改为： var checkboxOtherSkills = document.getElementById("oSkills");

然后，当然您需要将if (checkboxOtherSkills[oSkills].checked)替换为if (checkboxOtherSkills.checked)

Answer 2

 case "VIC": if ( postcode.charAt(0) == 3 || postcode.charAt(0) == 8){ error.textContent = ""; return true; } else { error.textContent = "Please enter a valid post code for VIC"; return false; } break; 

我将条件更改为适合的情况下返回true，否则返回false并且代码可以正常工作！