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

2019-11-19 15:44:27

字体：大中小

来源：转载

供稿：网友

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 完成注册页面表单校验的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：简单的网页广告特效实例

下一篇：JS模拟超市简易收银台小程序代码解析