JavaScript 表单验证 XHTML答案

【问题标题】：JavaScript Form Validation XHTMLJavaScript 表单验证 XHTML
【发布时间】：2014-07-04 17:24:39
【问题描述】：

我遇到问题的脚本是表单验证脚本。我难住了。我发现问题与这段代码有关，这些代码可以运行，但在此代码块之后的任何内容都不起作用。如果我删除此块，脚本将起作用。我尝试添加更多 if 语句来测试 null 的不同输入，但它们也不起作用。

var atPos=email.indexOf("@");
var dotPos=email.lastIndexOf(".");
if (atPos<1 || dotPos<atPos+2 || dotPos+2>=x.length)
   {
    alert("Please enter a valid email");
    return false;
   }

整个脚本：

<script type="text/javascript">
//<![CDATA[
function validateForm()
{

    //Validate First Name
    var fName=document.forms["orderForm"]["firstname"].value;
    if (fName==null || fName=="")
      {
      alert("First name must be filled out");
      return false;
      }

    //Validate Last Name
    var lName=document.forms["orderForm"]["lastname"].value;
    if (lName==null || lName=="")
      {
      alert("Last name must be filled out");
      return false;
      }

    //Validate Email
    var email=document.forms["orderForm"]["email"].value;
    if (email==null || email=="")
      {
      alert("Email must be filled out");
      return false;
      }
    var atPos=email.indexOf("@");
    var dotPos=email.lastIndexOf(".");
    if (atPos<1 || dotPos<atPos+2 || dotPos+2>=x.length)
      {
      alert("Please enter a valid email");
      return false;
      }

    //Validate Phone Number
    var phone=document.forms["orderForm"]["phoneNumber"].value;
    if (phone==null || phone=="")
      {
      alert("Phone Number must be filled out");
      return false;
      }
}
//]]>
</script>

还有形式：

<form action="index.html" id="orderForm" onsubmit="return validateForm()">

<table>
  <tr>
    <th>Item</th>
    <th>Product Code</th>
    <th>Diameter</th>
    <th>Lengh</th>
    <th>Colour</th>
    <th>Unit Price</th>
    <th>Quantity</th>
    <th>Sub Total</th>
  </tr>
  <tr>
    <td>Bolt</td>
    <td>B113</td>
    <td>9</td>
    <td>50</td>
    <td>Black</td>
    <td>2.15</td>
    <td><input type="text" name="quantityBolt" id="quantityBolt" /></td>
    <td>#total</td>
  </tr>
  <tr>
    <td>Nut</td>
    <td>B234</td>
    <td>5</td>
    <td>N/A</td>
    <td>Silver</td>
    <td>0.45</td>
    <td><input type="text" name="quantityNut" id="quantityNut" /></td>
    <td>#total</td>
  </tr>
  <tr>
    <td>Washer</td>
    <td>W359</td>
    <td>8</td>
    <td>N/A</td>
    <td>Silver</td>
    <td>0.30</td>
    <td><input type="text" name="quantityWasher" id="quantityWasher" /></td>
    <td>#total</td>
  </tr>
</table>

First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" /><br />
Email: <input type="text" name="email" /><br />
Phone Number: <input type="text" name="phoneNumber" /><br />
Street Number: <input type="text" name="streetNumber" /><br />
Address: <input type="text" name="address" /><br />
State: <select name="state" >
<option value="nsw">NSW</option>
<option value="qld">QLD</option>
<option value="vic">VIC</option>
<option value="act">ACT</option>
<option value="nt">NT</option>
<option value="tas">TAS</option>
<option value="sa">SA</option>
<option value="wa">WA</option>
</select><br />
Postcode: <input type="text" name="postcode" /><br />
Credit Card Number: <input type="text" name="creditNumber" /><br />
Credit Card Expiry: <input type="text" name="creditDate" /><br />
CSV Number: <input type="text" name="creditCSV" /><br /><br />

<br />
<input type="submit" value="submit" />
</form>

【问题讨论】：

标签： javascript html validation xhtml

【解决方案1】：

错误在这里：

if (atPos<1 || dotPos<atPos+2 || dotPos+2>=x.length)

错误控制台显示 “x 未定义”

而 Javascript 引擎往往只是放弃一个错误，所以它不会做任何其他事情。

【讨论】：