Rumah >hujung hadapan web >tutorial js >JavaScript教程之注册页面表单校验

JavaScript教程之注册页面表单校验

巴扎黑asal: 2017-08-21 10:00:241516semak imbas

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

1、步骤分析

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

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

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

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

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

问题：如何控制表单提交？

关于事件 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(校验对象)为真表示符合条件，为假则不符合。

Atas ialah kandungan terperinci JavaScript教程之注册页面表单校验. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：网页广告特效代码分享Artikel seterusnya：JavaScript实现超市收银台功能代码

Artikel berkaitan

Lihat lagi