使用“选择”菜单进行数据验证

时间:2019-04-28 10:19:32

标签: javascript html

我正在创建的应用程序的一部分要求用户输入当前居住地的状态,然后要求用户输入其邮政编码。然后,程序进行测试以查看邮政编码是否对该州有效。

例如。输入的国家(地区)“ VIC”邮政编码不能为> = 4000或<3000

我什至没有收到错误消息,即使邮政编码有效,我也始终收到错误消息

我的网页的JS

function validate () {
var result = true
var errMsg = " "
var postcode = document.getElementById("postcode").value;
var state = document.getElementById("state").value;
var other = document.getElementById("text").value;


    if (state == "VIC" || postcode >= 4000 || postcode < 3000) {
            errMsg = errMsg + "You have entered an invalid postcode for your chosen state\n"
            result = false;
    }
    else if (state == "VIC" || postcode >=9000 || postcode < 8000) {
            errMsg = errMsg + "You have entered an invalid postcode for your chosen state\n"
            result = false;
    }
    else if (state == "NSW" || postcode >=3000 || postcode < 1000) {
            errMsg = errMsg + "You have entered an invalid postcode for your chosen state\n"
            result = false;
    }
    else if (state == "QLD" || postcode <4000 || postcode >= 5000) {
            errMsg = errMsg + "You have entered an invalid postcode for your chosen stae\n"
            result = false;
    }
    else if (state == "QLD" || postcode <9000 || postcode >= 10000) {
            errMsg = errMsg + "You have entered an invalid postcode for your chosen state\n"
            result = false;
    }
    else if (state == "NT" || postcode >= 1000) {
            errMsg = errMsg + "You have entered an invalid postcode for your chosen state\n"
            result = false;
    }
    else if (state == "WA" || postcode < 6000 || postcode >= 7000) {
            errMsg = errMsg + "You have entered an invalid postcode for your chosen state\n"
            result = false;
    }
    else if (state == "SA" || postcode < 5000 || postcode >= 6000) {
            errMsg = errMsg + "You have entered an invalid postcode for your chosen state\n"
            result = false;
    }
    else if (state == "TAS" || postcode < 7000 || postcode >= 8000) {
            errMsg = errMsg + "You have entered an invalid postcode for your chosen state\n"
            result = false;
    }
    else if (state == "ACT" || postcode >= 1000) {
            errMsg = errMsg + "You have entered an invalid postcode for your chosen state\n"
            result = false;
    }

    if (document.getElementById("other").checked = true || other == "If you selected Other, enter your answer here...") {
        errMsg = errMsg + "You have selected other, please enter your answer into the text box provided"
        result = false;
    }
    if (errMsg != "") {
            document.getElementById("errMessage").value = errMsg;

    }
    return result;
}

function init() {
    if (document.getElementById("applypage")!=null) {
    var regForm = document.getElementById("regform");
    job_apply();
    regForm.onsubmit = validate;

    }
    else if (document.getElementById("jobspage") !=null) {
    storeJobNumber();
    }
}

window.onload = init;

我的网页的HTML

<!DOCTYPE html>
<html Lang="en"> 
<head>
    <meta charset="utf-8" />
    <meta name="description" content="CWA HELP DESK" />
    <meta name="keywords" content="HTML, CWA, Help, Desk" />
    <meta name="author" content ="Harry Keys" />
    <title>Application Form</title>
    <link href="style/style.css" rel="stylesheet" type="text/css">
    <script src="apply.js"></script>
</head>
<body id="applypage">

<form id="regform" method="post" action="http://mercury.swin.edu.au/it000000/formtest.php" novalidate="novalidate">
    <img src="images/logo.png" alt="Company Logo" />
    <h1> Job Application Form </h1>

<fieldset>
    <p><label for="jobNumber">Job Reference Number</label>
        <input type="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')" name="jobNumber" id="jobNumber" maxlength="5" size="7" required="required" readonly/>
    </p>
    <p><label for="givenName">Given Name</label>
        <input type="text"  onkeypress="return /[a-z]/i.test(event.key)" name="givenName" id="givenName" maxlength="20" size="15" required="required"/>
      <label for="familyName">Family Name</label>
        <input type="text"  onkeypress="return /[a-z]/i.test(event.key)" name="familyName" id="familyName" maxlength="20" size="15" required="required"/>
    </p>
</fieldset>

<fieldset>
    <legend>Personal Details</legend>
    <p><label for="dob">Date of Birth</label>
        <input type="date" name="dob" id="dob" required="required"/>
    </p>
    <p><label for="staddress">Street Address</label>
        <input type="text" name="staddress" id="staddress" maxlength="40" required="required"/>
        <label for="suburb">Suburb/Town</label>
        <input type="text" name="suburb" id="suburb" maxlength="40" required="required"/>
    </p>
    <p><label for="state">State</label>
        <select name="state" id="state">
            <option value="Please Select">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>
    </p>

    <p><label for="postcode">Postcode</label>
        <input type="text" name="postcode" id="postcode" onkeyup="this.value=this.value.replace(/[^\d]/,'')" maxlength="4" size="4" required="required"/>
    </p>
    <p><label for="email">Email</label>
        <input type="email" name="email" id="email" required="required"/>
    </p>
    <p><label for="phonenumber">Phone Number</label>
        <input type="text" name="phonenumber" id="phonenumber" onkeyup="this.value=this.value.replace(/[^\d]/,'')" maxlength="12" size="12" required="required"/>

<fieldset>
    <legend>Gender</legend>
    <p> <label for="male">Male</label>
        <input type="radio" id="male" name="Gender" value="male" required="required"/>
        <label for="female">Female</label>
        <input type="radio" id="female" name="Gender" value="female"/>
        <label for="other">Other</label>
        <input type="radio" id="undefined" name="Gender" value="undefined"/>
    </p>
</fieldset>

<fieldset>
    <legend>Skills List</legend>
    <p> <label for="teamwork">Teamwork</label>
            <input type="checkbox" id="teamwork" name="Skill[]" value="Teamwork" checked="checked"/>
        <label for="rubyskills">Ruby Experience</label>
            <input type="checkbox" id="rubyskills" name="Skill[]" value="Rubyskills"/>
        <label for="efficiency">Efficiency</label>
            <input type="checkbox" id="efficiency" name="Skill[]" value="Efficiency"/>
        <label for="communication">Communication</label>
            <input type="checkbox" id="communication" name="Skill[]" value="Communication"/>
        <label for="other">Other</label>
        <input type="checkbox" id="other" name="Skill[]" value="other"/>
    </p>
    <p> <textarea id="text" name="Skill[]" rows="5" cols="20" placeholder="If you selected Other, enter your answer here..."></textarea>
    </p>
</fieldset>
</fieldset>
<p> <textarea id="errMessage" rows="3" cols="40"></textarea> </p>
<input type="submit" value="Submit"/>
<input type="reset" value="Reset Form"/>
</form>

当我选择“ NSW”并输入不是> = 3000或<1000的邮政编码时,我不会收到错误消息。但我还是

1 个答案:

答案 0 :(得分:0)

我认为您的if-else-if构造有点令人困惑。 我建议使用一个开关块来验证选择了哪个状态,并检查每种情况的邮政编码是否在正确的范围内。

类似的东西:

function validate() {
  var result = true
  var errMsg = " "
  var postcode = document.getElementById("postcode").value;
  var state = document.getElementById("state").value;
  var other = document.getElementById("text").value;
  switch (state) {
    case "VIC":
      if (postcode >= 3000 && postcode < 4000) {
        result = true;
      }
      break;
    case "NSW":
      if (postcode >= 1000 && postcode < 3000) {
        result = true;
      }
      break;
    case "QLD":
      if (postcode >= 4000 && postcode < 5000) {
        result = true;
      }
      break;
  }
  if (!result) {
    errMsg = errMsg + "You have entered an invalid postcode for your chosen state\n";
  }
  if (document.getElementById("other").checked = true || other == "If you selected Other, enter your answer here...") {
    errMsg = "You have selected other, please enter your answer into the text box provided"
    result = false;
  }

  if (errMsg != "") {
    document.getElementById("errMessage").value = errMsg;

  }
  return result;
}