JS初学者实例教程(7):注册表单验证


上一篇JS初学者实例教程(6):Document对象读取表单元素

 实例七

本实例主要介绍了Document对象读取表单元素的使用,一个注册验证代码

<html>
  <head>
    <title>用户注册</title>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css">
<!--
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
.STYLE1 {color: #FFFFFF}
-->
  </style>
  <SCRIPT type="text/javascript">
    function Form_Submit()
 {
  if(regForm.userNumber.value=="")
  {
   alert("用户名不能为空!");
   return false;
  }
  else if(regForm.userpassWord.value=="")
  {
   alert("密码不能为空!");
   return false;
  }
  else if(regForm.userpassWord.value!=regForm.reuserpassWord.value)
  {
  alert("两次输入的密码不一致!");
   return false;
  }
  return true;
  //regForm.submit(); //不采用表单提交
 }
  </SCRIPT>
  </head>
 
  <body>
  <FORM id="register" name="regForm" method="post" action="">
  <table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#0099FF">
    <tr>
      <td align="center" valign="middle" bgcolor="#FFFFFF">用户注册</td>
    </tr>
    <tr>
      <td align="center" valign="middle" bgcolor="#FFFFFF">用户账号:
      <input name="userNumber" type="text" id="usernumber" size="15"></td>
    </tr>
    <tr>
      <td align="center" valign="middle" bgcolor="#FFFFFF">用户密码:
      <input name="userPassWord" type="text" id="userpassWord" size="15"></td>
    </tr>
    <tr>
      <td align="center" valign="middle" bgcolor="#FFFFFF">确认密码:
      <input name="reuserPassWord" type="text" id="reuserpassWord" size="15"></td>
    </tr>
    <tr>
      <td align="center" valign="middle" bgcolor="#FFFFFF">电子邮箱:
      <input name="email" type="text" id="email" size="15"></td>
    </tr>
    <tr>
      <td align="center" valign="middle" bgcolor="#FFFFFF"><input type="button" name="Submit" value="提交" onClick="Form_Submit()"></td>
    </tr>
  </table>
 </FORM>
  </body>
</html>

效果演示:


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3