JavaScript表单验证

JavaScript Form Validation XHTML

本文关键字:验证 表单 JavaScript      更新时间:2023-09-26

我有问题的脚本是一个表单验证。我被难住了。我已经知道问题出在这段代码上,这段代码可以正常工作,但在这段代码之后的任何代码都不能正常工作。如果我删除这个块脚本工作。我试着添加更多的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>

错误在这里:

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

错误控制台显示"x未定义"

和Javascript引擎倾向于放弃一个错误,所以它不会做任何其他的