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 全部选择 提示:你可先修改部分代码,再按运行]



相关阅读:
PHP入门学习笔记之一
去掉a标签超链接的虚线框的方法
用ASP开发试题库与在线考试系统(1)
彻底关闭Vista安全中心没完没了的提示
Dede 删除文档同时文章中的图片的方法
PHP.MVC的模板标签系统(三)
如何使用CSS Sprites优化你的网站
用 CSS 让你的按钮(button)更加迷人
PHP基础教程(13):PHP $_GET
经典海量jQuery插件 大家可以收藏一下
使用FSO按文件大小浏览文件目录并进行删除操作
掌握常用的用于网页中引用内容的HTML标记
探索字串的奥秘
更改数据挖掘查询的超时值
快速导航

Copyright © 2016 phpStudy |