验证具有邮政编码和复选框列表文本区域的状态

时间：2017-09-25 10:51:57

标签： javascript html

到目前为止，我的java脚本只包含年龄验证，但我需要更多，当用户选择一个状态时，邮政编码的第一个数字应该是这样的VIC = 3 OR 8，NSW = 1或2， QLD = 4或9，NT = 0，WA = 6，SA = 5，TAS = 7，ACT = 0.另一个是当用户选择＆＃34;其他技能＆＃34;在复选框列表中，他们必须在其中写入，因此它不能为空。如何在不使用任何库代码的情况下进行这些验证？

＆＃13;
＆＃13; 
"use strict";
/*get variables from form and check rules*/
function validate() {
  var errMsg = ""; /* stores the error message */
  var result = true; /* assumes no errors */
  var age = document.getElementById("age").value;
  var state = document.getElementById("state").value;
  var postcode = document.getElementById("postcode").value;

  //get varibles from form and check rules here
  // if something is wrong set result = false, and concatenate error message
  var today = new Date();
  var age = today.getFullYear() - date.getFullYear();

  if (age <= 15 && age >= 80) { // Outside age ranges.
    errMsg = errMsg + "You must be between the ages of 15 to 80 to apply for this job\n"
    result = false;
  }

  /** if (/^[3][0-9]{3}$/) for postcode*/

  if (errMsg != "") { //only display message box if there is something to show
    alert(errMsg);
  }
  return result; //if false the information will not be sent to the server
}


function init() {

  var regForm = document.getElementById("regForm"); // get ref to the HTML element

  regForm.onsubmit = validate; //register the event listener 
}

window.onload = init;
＆＃13; 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="description" content="Prototype Website" />
  <meta name="keywords" content="HTML, CSS, JavaScript" />
  <title>The Virtual World</title>
  <link href="styles/style.css" rel="stylesheet" />
  <script src="apply.js"></script>
</head>

<body>
  <article>
    <header>
      <h1>The Virtual World</h1>

      <nav>
        <p class="menu"><a href="index.html#home">Home</a></p>
        <p class="menu"><a href="jobs.html#jobs">Jobs</a></p>
        <p class="menu"><a href="apply.html#apply">Apply</a></p>
        <p class="menu"><a href="about.html#about">About</a></p>
        <p class="menu"><a href="enhancements.html#enhancements">Enhancements</a></p>
      </nav>
    </header>
    <section id="required">
      <h5>All fields with * are required</h5>
    </section>
    <form id="regForm" method="post" action="http://mercury.swin.edu.au/it000000/formtest.php">
      <fieldset>
        <legend>Job Application</legend>
        <p><label for="JobID">*Job ID:</label>
          <input type="text" name="JobID" id="JobID" maxlength="5" size="10" pattern="^[a-zA-Z]{2}[0-9]{3}$" required="required" /></p>
        <section id="choose">
          <h5>Please choose from QM593 or CS197</h5>
        </section>
        <fieldset>
          <legend>Personal Details</legend>
          <p><label for="title">*Title:</label>
            <select name="title" id="title" required="required">
        <option value="">Please Select</option>         
        <option value="title">Dr</option>
        <option value="title">Mr</option>
        <option value="title">Miss</option>
        <option value="title">Mrs</option>
        <option value="title">Ms</option>
        </select></p>

          <p><label for="firstName">*First Name:</label>
            <input type="text" name="firstName" id="firstName" maxlength="20" size="20" pattern="^[a-zA-Z ]+$" required="required" />

            <label for="familyName">*Family Name:</label>
            <input type="text" name="familyName" id="familyName" maxlength="20" size="20" pattern="^[a-zA-Z ]+$" required="required" /></p>

          <p><label for="midName">Middle Name:</label>
            <input type="text" name="midName" id="midName" maxlength="20" size="20" pattern="^[a-zA-Z ]+$" /></p>

          <p><label for="dob">*Date of Birth:</label>
            <input type="text" name="dob" id="dob" placeholder="dd/mm/yyyy" pattern="\d{1,2}/\d{1,2}/\d{4}" maxlength="10" size="10" required="required" /></p>

          <p>*Gender:
            <label for="male">Male</label>
            <input type="radio" id="male" name="sex" value="male" required="required" />
            <label for="female">Female</label>
            <input type="radio" id="female" name="sex" value="female" required="required" /></p>

          <p><label for="street">*Street Address:</label>
            <input type="text" name="street" id="street" maxlength="40" size="30" required="required" /></p>

          <p><label for="suburb">*Suburb/town:</label>
            <input type="text" name="suburb" id="suburb" maxlength="40" size="20" required="required" /></p>

          <p><label for="state">*State:</label>
            <select name="state" id="state" required="required">
        <option value="">Please Select</option>         
        <option value="state">VIC</option>
        <option value="state">NSW</option>
        <option value="state">QLD</option>
        <option value="state">NT</option>
        <option value="state">WA</option>
        <option value="state">SA</option>
        <option value="state">TAS</option>
        <option value="state">ACT</option>
        </select></p>

          <p><label for="postcode">*Postcode:</label>
            <input type="text" name="postcode" id="postcode" minlength="4" maxlength="4" size="10" pattern="^[0-9]{4}$" required="required" /></p>

          <p><label for="email">*Email:</label>
            <input type="email" name="email" id="email" size="30" required="required" /></p>

          <p><label for="number">*Phone number:</label>
            <input type="tel" name="number" id="number" minlength="8" maxlength="12" size="10" required="required" /></p>

          <p>Skill list:</p>
          <p><label for="C/C+">C/C+</label>
            <input type="checkbox" id="C/C+" name="category[]" checked="checked" /></p>
          <p><label for="XML">XML</label>
            <input type="checkbox" id="XML" name="category[]" /></p>
          <p><label for="Java">Java</label>
            <input type="checkbox" id="Java" name="category[]" /></p>
          <p><label for="Python">Python</label>
            <input type="checkbox" id="Python" name="category[]" /></p>
          <p><label for="SQL">SQL</label>
            <input type="checkbox" id="SQL" name="category[]" /></p>
          <p><label for="PERL">PERL</label>
            <input type="checkbox" id="PERL" name="category[]" /></p>
          <p><label for="MySQL">MySQL</label>
            <input type="checkbox" id="MySQL" name="category[]" /></p>
          <p><label for="Windows">Windows</label>
            <input type="checkbox" id="Windows" name="category[]" /></p>
          <p><label for="UNIX">UNIX</label>
            <input type="checkbox" id="UNIX" name="category[]" /></p>
          <p><label for="Linux">Linux</label>
            <input type="checkbox" id="Linux" name="category[]" /></p>
          <p><label for="other">Other Skills:</label> </p>
          <p>
            <textarea id="other" name="other" rows="8" cols="70" placeholder="Please write any other skills you may have here..."></textarea>
          </p>
        </fieldset>
      </fieldset>
      <input type="submit" value="Apply" />
      <input type="reset" value="Reset Application" />
    </form>
  </article>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

使用正则表达式验证帖子代码。

尝试使用这两个函数来验证邮政编码和技能

HTML - 向其他人添加新复选框。我只在表单中添加了测试字段。

＆＃13;
＆＃13; 
function validate() {
  if(!validateOtherSkills() || validatePostCode()){
     result = false;
  }
  return result; //if false the information will not be sent to the server
}

function validateOtherSkills(){
  var state = document.getElementById("OtherSK").checked;


  if(state && document.getElementById("other").value.trim().length===0){
     alert('Specify other skills');
     return false;
  }
  return true;
}
function validatePostCode(){
 var postcode = document.getElementById("postcode").value;
 var state = document.getElementById("state").options[document.getElementById("state").selectedIndex].text;

 var regex;
 //VIC = 3 OR 8, NSW = 1 OR 2 ,QLD = 4 OR 9 ,NT = 0 ,WA = 6 ,SA=5 ,TAS=7 ,ACT= 0.
 switch (state) {
    case "Please Select":
        return false;
    case "VIC":
        regex = new RegExp(/(3|8)\d+/);
        break;
     case "NSW":
        regex = new RegExp(/(1|2)\d+/);
        break;
     case "QLD":
        regex = new RegExp(/(4|9)\d+/);
        break;
     case "NT":
        regex = new RegExp(/0\d+/);
        break;
     case "WA":
        regex = new RegExp(/6\d+/);
        break;
     case "SA":
        regex = new RegExp(/5\d+/);
        break;
     case "TAS":
        regex = new RegExp(/7\d+/);
        break;
     case "ACT":
        regex = new RegExp(/0\d+/);
        break;
}
 var result = postcode.match(regex);
 if(!result){
   alert('Postal code invalid');
 }
 return result;
}

function init() {

  var regForm = document.getElementById("regForm"); // get ref to the HTML element

  regForm.onsubmit = validate; //register the event listener 
}

window.onload = init;
＆＃13; 
<article>
    
    <section id="required">
      <h5>All fields with * are required</h5>
    </section>
    <form id="regForm" method="post" action="">
      <fieldset>
        <legend>Job Application</legend>
       
        <section id="choose">
          <h5>Please choose from QM593 or CS197</h5>
        </section>
        <fieldset>
          <legend>Personal Details</legend>
          <p><label for="state">*State:</label>
            <select name="state" id="state" required="required">
        <option value="">Please Select</option>         
        <option value="state">VIC</option>
        <option value="state">NSW</option>
        <option value="state">QLD</option>
        <option value="state">NT</option>
        <option value="state">WA</option>
        <option value="state">SA</option>
        <option value="state">TAS</option>
        <option value="state">ACT</option>
        </select></p>

          <p><label for="postcode">*Postcode:</label>
            <input type="text" name="postcode" id="postcode" minlength="4" maxlength="4" size="10" pattern="^[0-9]{4}$" required="required" /></p>


          <p>Skill list:</p>
          <p><label for="C/C+">C/C+</label>
            <input type="checkbox" id="C/C+" name="category[]" checked="checked" /></p>
          <p><label for="XML">XML</label>
            <input type="checkbox" id="XML" name="category[]" /></p>
          <p><label for="Java">Java</label>
            <input type="checkbox" id="Java" name="category[]" /></p>
          <p><label for="Python">Python</label>
            <input type="checkbox" id="Python" name="category[]" /></p>
          <p><label for="SQL">SQL</label>
            <input type="checkbox" id="SQL" name="category[]" /></p>
          <p><label for="PERL">PERL</label>
            <input type="checkbox" id="PERL" name="category[]" /></p>
          <p><label for="MySQL">MySQL</label>
            <input type="checkbox" id="MySQL" name="category[]" /></p>
          <p><label for="Windows">Windows</label>
            <input type="checkbox" id="Windows" name="category[]" /></p>
          <p><label for="UNIX">UNIX</label>
            <input type="checkbox" id="UNIX" name="category[]" /></p>
          <p><label for="Linux">Linux</label>
            <input type="checkbox" id="Linux" name="category[]" /></p>
          <p><label for="OtherSK">Other</label> 
<input type="checkbox" id="OtherSK" name="category[]" /></p>
          <p><label for="other">Other Skills:</label> </p>
          <p>
            <textarea id="other" name="other" rows="8" cols="70" placeholder="Please write any other skills you may have here..."></textarea>
          </p>
        </fieldset>
      </fieldset>
      <input type="submit" value="Apply" />
      <input type="reset" value="Reset Application" />
    </form>
  </article>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

尝试使用match jquery，如下所示。

"use strict";

/*get variables from form and check rules*/

function validate() {
  var errMsg = "";
  /* stores the error message */  
  if($('#state').find(':selected').text() === 'VIC' && $('#postcode').val().match('^3')){
    //do your codings
  }
  else{
    alert(errMsg);
  }
}

function init() {
  var regForm = document.getElementById("regForm"); // get ref to the HTML element
  regForm.onsubmit = validate; //register the event listener 
}

window.onload = init;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<body>
  <article>
    <header>
      <h1>The Virtual World</h1>
    </header>
    <section id="required">
      <h5>All fields with * are required</h5>
    </section>
    <form id="regForm" method="post" action="http://mercury.swin.edu.au/it000000/formtest.php">
      <fieldset>
        <legend>Personal Details</legend>
        <p><label for="state">*State:</label>
          <select name="state" id="state" required="required">
            <option value="">Please Select</option>         
            <option value="state">VIC</option>
            <option value="state">NSW</option>
            <option value="state">QLD</option>
            <option value="state">NT</option>
            <option value="state">WA</option>
            <option value="state">SA</option>
            <option value="state">TAS</option>
            <option value="state">ACT</option>
            </select></p>

        <p><label for="postcode">*Postcode:</label>
          <input type="text" name="postcode" id="postcode" minlength="4" maxlength="4" size="10" pattern="^[0-9]{4}$" required /></p>

      </fieldset>
      <input type="submit" value="Apply" />
      <input type="reset" value="Reset Application" />
    </form>
  </article>

</body>

</html>

相关问题
最新问题