JavaScript 完成注册页面表单校验的实例


Posted in Javascript onAugust 19, 2017

1、步骤分析

第一步:确定事件(onsubmit)并为其绑定一个函数

第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)

第三步:对用户输入的数据进行判断

第四步:数据合法(让表单提交)

第五步:数据非法(给出错误提示信息,不让表单提交)

问题:如何控制表单提交?

关于事件 onsubmit:一般用于表单提交的位置,那么需要在定义函数的时候给出一个 返回值。

onsubmit = return checkForm()

2、完成注册页面表单校验

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>注册页面</title>
  <script>
   function checkForm(){
    //alert("aa");
    
    /**校验用户名*/
    //1.获取用户输入的数据
    var uValue=document.getElementById("user").value;
    //alert(uValue);
    if(uValue==""){
     //2.给出错误提示信息
     alert("用户名不能为空");
     return false;
    }
    
    /**校验密码*/
    var pValue=document.getElementById("password").value;
    if(pValue==""){     //注意空的表示方法
     alert("密码不能为空");
     return false;
    }
     
    /** 校验确认密码*/
    var rpValue=document.getElementById("repassword").value;
    if(rpValue!=pValue){
     alert("两次密码输入不一致!");
     return false;
    }
    
    /**校验邮箱*/
    var eValue=document.getElementById("email").value;
    if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
     alert("邮箱格式不正确!");
    }
   }
  </script>
 </head>
 <body>
  <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
   
   <!--1.logo部分-->
   <tr>
    <td>
     <!--嵌套一个一行三列的表格-->
     <table border="1px" width="100%">
      <tr height="50px">
       <td width="33.3%">
        <img src="../img/logo2.png" height="47px" />
       </td>
       <td width="33.3%">
        <img src="../img/header.png" height="47px"/>
       </td>
       <td width="33.3%">
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登录</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注册</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >购物车</a>
       </td>
      </tr>
     </table>
    </td>
   </tr>
   
   <!--2.导航栏部分-->
   <tr height="50px" >
    <td bgcolor="black">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font size="3" color="white">首页</font></a>           
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font color="white">手机数码</font></a>        
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font color="white">电脑办公</font></a>       
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font color="white">鞋靴箱包</font></a>       
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font color="white">家用电器</font></a>
    </td>
   </tr>
   
   <!--3.注册表单-->
   <tr>
    <td height="600px" background="../img/regist_bg.jpg">
     <!--嵌套一个十行二列的表格-->
     <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
     <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
      <tr height="40px">
       <td colspan="2">
        <font size="4">会员注册</font>   USER REGISTER
       </td>
      </tr>
      <tr>
       <td>用户名</td>
       <td>
        <input type="text" name="user" size="35px" id="user"/>
       </td>
      </tr>
      <tr>
       <td>密码</td>
       <td>
        <input type="password" name="password" size="35px" id="password"/>
       </td>
      </tr>
      <tr>
       <td>确认密码</td>
       <td>
        <input type="password" name="repassword" size="35px" id="repassword"/>
       </td>
      </tr>
      <tr>
       <td>E-mail</td>
       <td>
        <input type="text" name="e-mail" size="35px" id="email"/>
       </td>
      </tr>
      <tr>
       <td>姓名</td>
       <td>
        <input type="text" name="username" size="35px"/>
       </td>
      </tr>
      <tr>
       <td>性别</td>
       <td>
        <input type="radio" name="sex" value="男"/>男
        <input type="radio" name="sex" value="女"/>女
       </td>
      </tr>
      <tr>
       <td>出生日期</td>
       <td>
        <input type="text" name="birthday" size="35px"/>
       </td>
      </tr>
      <tr>
       <td>验证码</td>
       <td>
        <input type="text" name="yzm" />
        <img src="../img/yanzhengma.png" />
       </td>
      </tr>
      <tr align="center">
       <td colspan="2">
        <input type="submit" value="注册" />
       </td>
      </tr>
     </table>
     </form>
    </td>
   </tr>
   
   <!--4.广告图片-->
   <tr>
    <td>
     <img src="../img/footer.jpg" width="100%"/>
    </td>
   </tr>
   
   <!--5.友情链接和版权信息-->
   <tr>
    <td align="center">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>关于我们</font></a>
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>联系我们</font></a>
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>招贤纳士</font></a>
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>法律声明</font></a>
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>友情链接</font></a>
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>支付方式</font></a>
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>配送方式</font></a>
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>服务声明</font></a>
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>广告声明</font></a>
     <p>
      Copyright © 2005-2016 hh商城 版权所有 
     </p>
    </td>
   </tr>
  </table>
 </body>
</html>

在校验确认密码这部分使用了正则表达式(不需要记忆,需要时查找文档)

正则式.test(校验对象)为真表示符合条件,为假则不符合。

以上这篇JavaScript 完成注册页面表单校验的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
javascript实现简易计算器
Feb 01 Javascript
关于vue-router路径计算问题
May 10 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 #Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 #Javascript
javascript将url解析为json格式的两种方法
Aug 18 #Javascript
Vue组件选项props实例详解
Aug 18 #Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 #Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 #Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 #Javascript
You might like
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
python中ConfigParse模块的用法
2014/09/29 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
python使用knn实现特征向量分类
2018/12/26 Python
PyQt5实现简易计算器
2020/05/30 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
python中Django文件上传方法详解
2020/08/05 Python
全国税务系统先进集体事迹材料
2014/05/19 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
合作协议书范文
2014/08/20 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
捐书仪式主持词
2015/07/04 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle