登录  /  注册
首页 > web前端 > js教程 > 正文

JavaScript实现注册页面表单校验的实例分享

黄舟
发布: 2017-08-20 10:03:19
原创
2306人浏览过

下面小编就为大家带来一篇javascript 完成注册页面表单校验的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

1、步骤分析

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

第二步:书写这个函数(获取用户输入的数据)

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

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

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

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

关于事件 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" / alt="JavaScript实现注册页面表单校验的实例分享" >
       </td>
       <td width="33.3%">
        <img  src="../img/header.png" height="47px"/ alt="JavaScript实现注册页面表单校验的实例分享" >
       </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" / alt="JavaScript实现注册页面表单校验的实例分享" >
       </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"    style="max-width:90%"/ alt="JavaScript实现注册页面表单校验的实例分享" >
    </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实现注册页面表单校验的实例分享的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号