使用JavaScript進行表單驗證

-1

我想驗證表單輸入，但我的驗證無效。
該字符串必須至少包含一個字母或數字，
整數應該在0-11之間，並應至少選取一個水果。
但即使我不輸入任何輸入，
它只是去input_ok.html文件。
它需要彈出錯誤窗口。使用JavaScript進行表單驗證

這裏是我的代碼：

function validateInput() { 
    var str = myForm.inputString.value; 
    var nbrStr = myForm.inputInteger.value; 
    var nbr = parseInt(nbrStr); 
    var fruit = myForm.fruit.value; 
    if (str != "" && nbrStr != "" && fruit != "" && !isNaN(nbr) && nbr < 11) { 
     return true; 
    } else { 
     var msg = ""; 
     var strError = false; 
     if (str == "") { 
      msg += "\nPlease enter a string with at least one letter or digit"; 
      strError = true; 
     } 
     if (nbrStr == "") { 
      msg += "\nPlease enter an integer in the range 0-11"; 
     } else if (isNaN(nbr)) { 
      msg += "\nPlease enter an integer"; 
     } else if (nbr > 11) { 
      msg += "\nPlease enter an integer less than 11"; 
     } 
     if (strError) { 
      myForm.inputString.focus(); 
     } else { 
      myForm.inputInteger.focus(); 
     } 
     alert(msg); 
    } 
    return false; 
}

<body> 
    <h1>Week 08, Exercise 01</h1> 
    <form action="week08_01servlet" 
      method="post" 
      name="myForm" 
      onsubmit="return validateInput();"> 
     <p>Please enter the following information, 
     and then click the submit button.</p> 
     <p class="indent">A string with at least one letter or digit 
      <input type="text" name="inputString"> 
      <br>An integer in the range 0-11 
      <input type="text" name="inputInteger"> 
      <br>Pick a fruit <select name="fruit"> 
       <option value="---">--- 
       <option value="apple">apple 
       <option value="banana">banana 
       <option value="cherry">cherry 
       <option value="pear">pear 
      </select></p> 
     <p><input type="submit" value="Submit"></p> 
     <input type="hidden" name="command" value="do_it"> 
    </form> 
</body>

來源

2010-12-05 kamweshi

請確保您在服務器端**驗證所有表單輸入**。有人可能繞過Javascript驗證。 – 2010-12-05 13:15:31

除非您的驗證規則特別複雜，否則我建議使用預先構建的JavaScript驗證庫，而不是自行編譯。有很多很好的東西（我更喜歡http://bassistance.de/jquery-plugins/jquery-plugin-validation/，但是有很多其他的libs，都基於一個框架，如jQuery和獨立的庫）。自己這樣做只會導致你不必要的工作，並且你還有所有你的服務器端驗證寫入（你記得服務器端的東西，對嗎？） – GordonM 2010-12-05 13:15:38

這顯然是功課，但我beleave每一個問題deservers一個答案。有效的xhtml5，javascript用jslint檢查並用ajaxmin壓縮。請享用。您也可以閱讀ppks Introduction to Forms。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Week 08, Exercise 01</title> 
    <link rel="stylesheet" href="Week08_01.css"> 
    <script> 
    function validateInput(c){var f=c.inputString.value,d=c.inputInteger.value,b=parseInt(d,10),g=c.fruit.value;if(f!==""&&d!==""&&g!==""&&!isNaN(b)&&b>=0&&b<11)return true;else{var a="",e=false;if(f===""){a+="\nPlease enter a string with at least one letter or digit";e=true}if(d==="")a+="\nPlease enter an integer in the range 0-11";else if(isNaN(b))a+="\nPlease enter an integer";else if(b<=0)a+="\nPlease enter a positive integer";else if(b>11)a+="\nPlease enter an integer less than 11";if(e)c.inputString.focus();else c.inputInteger.focus();alert(a);return false}} 
    </script> 
</head> 
<body> 
    <h1>Week 08, Exercise 01</h1> 
    <form action="week08_01servlet" 
     method="post" 
     name="myForm" 
     onsubmit="return validateInput(this);"> 
     <p>Please enter the following information, 
     and then click the submit button.</p> 
     <p class="indent">A string with at least one letter or digit 
      <input type="text" name="inputString" /> 
      <br>An integer in the range 0-11 
      <input type="text" name="inputInteger" /> 
      <br />Pick a fruit <select name="fruit"> 
       <option value="---">---</option> 
       <option value="apple">apple</option> 
       <option value="banana">banana</option> 
       <option value="cherry">cherry</option> 
       <option value="pear">pear</option> 
      </select></p> 
     <p><input type="submit" value="Submit"> 
     <input type="hidden" name="command" value="do_it"></p> 
    </form> 
</body> 
</html>

來源

2010-12-05 13:31:23

使用JavaScript進行表單驗證

回答

相關問題