首页 > 编程 > JS > 正文

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

2020-09-19 11:13:36
字体:
来源:转载
供稿:网友

上一篇js教程学习了: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 全部选择 提示:你可先修改部分代码,再按运行]

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表