使用Javascript的交互式表单_Javascript_Validation_Dom Events

使用Javascript的交互式表单

javascript validation

使用Javascript的交互式表单,javascript,validation,dom-events,Javascript,Validation,Dom Events,我需要我的Javascript文件来验证用户输入。它应该确保名称仅为个字符，年龄不小于18岁且不大于110岁，并且选择了一个项目。我也希望它拒绝任何格式不正确的表格。我试图让脚本验证处于焦点的输入框。我怎么了  <head> <link type="text/css" rel="stylesheet" hre

我需要我的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;
      }
}


学习指南
认证准备的简单表格
名称：您需要将文本框和其他表单字段放在表单内部，而不是表单外部。在开始表格之前移动表格标记，并在表格结束标记之后结束表格标记
<form action="" id="form1">
<table border="1">
...
</table>
</form>


...
我移动了标签，但这并没有验证表单。标记验证程序说我有9个错误，表单本身不允许我输入年龄。您的JavaScript位于
标记之外。你能把它放在里面吗标记？javascript是一个单独的链接文件。