Question

我需要我的Javascript文件来验证用户输入。它应该确保名称只是字符，年龄不小于18且不大于110，并且选择一个项目。我也希望它拒绝任何格式不正确的表单。我试图让脚本验证焦点的输入框。我有什么不对？

<!--catalog.php
    A catalog exploring different study material in IT.
    -->

<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
  <title>Study Guides</title>
</head>
<body>
<h2 align="center">A Simple Table for Certification Preparation</h2>
<center>
  <label><p>Name: <input type="text" id="custName"; onchange= "custName_onchange()"; size="32";</p></label>
  <label><p>Age: <input type="text" id="custAge" onblur="custAge()" size="3" maxlength="3";</p></label>

<table border="1">

<tr><th>Selection</th> <th>Book</th> <th>Image</th> <th>Description</th> <th>Unit Price</th></tr>

<tr>
<td> <p> <label> <input type = "radio" name = "price" value = "$34.13" checked = "checked" /></label></p></td>
<td>CompTIA A+</td> 
<td><img src = "images/A+.jpeg" height = "150" width = "100" alt= "Picture of CompTIA A+ Book"/></td> 
<td>The CompTIA A+ certification is the starting point for a career in IT. The exam covers maintenance of PCs, mobile devices, laptops, operating systems and printers.</td>
<td>$34.13</td>
</tr>

<tr>
<td> <p> <label> <input type = "radio" name = "price" value = "$31.16" checked = "checked" /></label></p></td>
<td>CompTIA Network+</td> 
<td><img src = "images/Network+.jpeg" height = "150" width = "100" alt= "Picture of CompTIA Network+ Book"/></td> 
<td>The exam covers network technologies, installation and configuration, media and topologies, management, and security. Candidate job roles include network administrator, network technician, network installer, help desk technician and IT cable installer.</td>
<td>$31.16</td>
</tr>

<tr>
<td> <p> <label> <input type = "radio" name = "price" value = "$29.08" checked = "checked" /></label></p></td>
<td>CompTIA Security+</td> 
<td><img src = "images/Security+.jpeg" height = "150" width = "100" alt= "Picture of CompTIA Security+ Book"/></td> 
<td>CompTIA Security+ not only ensures that candidates will apply knowledge of security concepts, tools, and procedures to react to security incidents, it ensures that security personnel are anticipating security risks and guarding against them.</td>
<td>$29.08</td>
</tr>

<tr>
<td> <p> <label> <input type = "radio" name = "price" value = "$35.17" checked = "checked" /></label></p></td>
<td>CompTIA Linux+</td> 
<td><img src = "images/Linux+.jpeg" height = "150" width = "100" alt= "Picture of CompTIA Linux+ Book"/></td> 
<td>CompTIA Linux+ Powered by LPI is a high-stakes, vendor-neutral certification that validates the fundamental knowledge and skills required of junior Linux administrators.</td>
<td>$35.17</td>
</tr>

<tr>
<td> <p> <label> <input type = "radio" name = "price" value = "$31.50" checked = "checked" /></label></p></td>
<td>Cisco CCNA</td> 
<td><img src = "images/CCNA.jpeg" height = "150" width = "100" alt= "Picture of Cisco CCNA Book"/></td> 
<td> The CCNA Routing and Switching validates the ability to install, configure, operate, and troubleshoot medium-size routed and switched networks.</td>
<td>$31.50</td>
</tr>
</table>

<form action = "" id="form1">
  <p>
     <input type = "button" value = "submit" id="btnSubmitForm" onclick="btnSubmitForm_onclick()"/>
     <input type = "button" value = "reset" />
  </p>
</form>

<a href= "Home.php">Back to Home</a><br />
<script type = "text/javascript" src = "catalog.js" >
    </script>
</p>
</form>   
</center>
</body>
</html>

//JavaScript to Validate Form
function btnSubmitForm_onclick()
{
var myForm= document.form1;

   if(myForm.custAge.value=="" || myForm.custName=="")
   {
   alert("Please fill out entire form before submission.");
   if(myForm.custName=="")
   {
   myForm.custName.focus();
   }
   else
   {
   myForm.custAge.focus();
   }
}
   else
   {
   alert("Submission Accepted" + myForm.custName.value);
   }
}


function custAge_onblur()
{
   var custAge= custAge;
      if (isNaN(custAge.value)==true)
      {
      alert("Please enter a valid age");
      custAge.focus();
      custAge.select();
      }
   if (age>=18 || age<=110)
   {
   return true;
   }
   if(!(age>=18 || age<=110))
   {
   alert("Your age is NOT between 18 and 110.")
   return false;
   }
}


function custName_onchange()
{
   var custName= custName;
      if(custName<4)
      {
      alert("The name you entered ("+custName.value+
      ")is not in the correct form. \n"+
      "The correct form is: First-name Last-name \n"+
      "Please try again.")
      return false;
      }
      else
      {
      return true;
      }
}

Answer 1

您需要将文本框和其他表单字段放在表单中，而不是在表单之外。在开始表之前移动表单标记，并在表结束标记

之后结束表单tAg

<form action="" id="form1">
<table border="1">
...
</table>
</form>

使用Javascript的交互式表单

1 个答案: