使用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进行表单验证

回答

相关问题