我在使用java脚本验证申请表时遇到了很多问题。
validatePostCode：从选择框中取值，并根据选择的内容，检查后置代码的第一个值是否与设置验证匹配。我试过.charAt（0），但即使它是正确的，它仍会显示错误信息。
validateTextBox：如果＆＃34; otherskills＆＃34;选中复选框，文本框不能为空。正如你在我的html中看到的那样，我的复选框使用数组，但我不知道只获得＃34;其他技能的价值＆＃34;
谢谢
"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.-]+\.[a-z]{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>
答案 0 :(得分：1)
validatePostCode：从选择框中取值，具体取决于 选择什么，检查邮政编码的第一个值是否匹配 设置验证。我试过.charAt（0）但它仍然显示错误 消息，即使它是正确的。
那是因为你将postcode.charAt(0)（字符串）与数字进行比较。您可以postcode.charAt(0) !== 1代替postcode.charAt(0) !== "1" {注意"1"现在也是字符串）
现在关于validateTextBox
Selector document.getElementById("skills[]")返回null，因为没有id为“技能[]”的元素。
您想要的复选框的ID为“oSkills”，因此您可以执行以下操作：
var checkboxOtherSkills = document.getElementById("oSkills");
当然，您需要将if (checkboxOtherSkills[oSkills].checked)替换为if (checkboxOtherSkills.checked)
答案 1 :(得分：0)
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并且代码有效！