你的位置:首页 > Java教程

[Java教程]JavaScript学习——完善注册页面表单校验

1、之前我们已经使用弹出框的方式实现了表单校验的功能,但是此种方式用户体验效果很差

我们希望做成把提示信息和校验结果放在输入栏的后面。

2、步骤分析 (此案例基于HTML&CSS——网站注册页面实现的)

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

第二步:书写绑定函数(在输入框的后面给出提示信息)

第三步:确定事件(onblur 离焦事件)并为其绑定一个函数

第四步:书写函数(对数据进行校验,分别给出提示)

JS代码:(传入参数的目的减少重复代码,增加通用性)

 1 <script> 2        function showTips(id,info){ 3     document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>"; 4    } 5    function check(id,info){ 6     //1.获取用户输入的用户名数据 7     var uValue=document.getElementById(id).value; 8     //2.进行校验 9     if(uValue==""){10      document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";11     }else{12      document.getElementById(id+"span").innerHTML="";13     }14    }15 </script>

HTML代码:

<input type="text" name="user" size="35px" id="user" onfocus="showTips('user','用户名必填!')" onblur="check('user','用户名不能为空!')"/><span id="userspan"></span>

最终代码如下:

 1 <!DOCTYPE html> 2 <html> 3  <head> 4   <meta charset="UTF-8"> 5   <title>注册页面</title> 6   <script> 7    function showTips(id,info){ 8     document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>"; 9    } 10    function check(id,info){ 11     //1.获取用户输入的用户名数据 12     var uValue=document.getElementById(id).value; 13     //2.进行校验 14     if(uValue==""){ 15      document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>"; 16     }else{ 17      document.getElementById(id+"span").innerHTML=""; 18     } 19    } 20   </script> 21  </head> 22  <body> 23   <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px"> 24     25    <!--1.logo部分--> 26    <tr> 27     <td> 28      <!--嵌套一个一行三列的表格--> 29      <table border="1px" width="100%"> 30       <tr height="50px"> 31        <td width="33.3%"> 32         <img src="../img/logo2.png" height="47px" /> 33        </td> 34        <td width="33.3%"> 35         <img src="../img/header.png" height="47px"/> 36        </td> 37        <td width="33.3%"> 38         <a href="#">登录</a> 39         <a href="#">注册</a> 40         <a href="#">购物车</a> 41        </td> 42       </tr> 43      </table> 44     </td> 45    </tr> 46     47    <!--2.导航栏部分--> 48    <tr height="50px" > 49     <td bgcolor="black"> 50      <a href="#"><font size="3" color="white">首页</font></a>&nbsp; &nbsp; &nbsp; &nbsp;     51      <a href="#"><font color="white">手机数码</font></a> &nbsp; &nbsp; &nbsp; &nbsp; 52      <a href="#"><font color="white">电脑办公</font></a>&nbsp; &nbsp; &nbsp; &nbsp; 53      <a href="#"><font color="white">鞋靴箱包</font></a>&nbsp; &nbsp; &nbsp; &nbsp; 54      <a href="#"><font color="white">家用电器</font></a> 55     </td> 56    </tr> 57     58    <!--3.注册表单--> 59    <tr> 60     <td height="600px" background="../img/regist_bg.jpg"> 61      <!--嵌套一个十行二列的表格--> 62      <form action="#" method="get" name="regForm" onsubmit="return checkForm()"> 63      <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> 64       <tr height="40px"> 65        <td colspan="2"> 66         <font size="4">会员注册</font>&nbsp;&nbsp;&nbsp;USER REGISTER 67        </td> 68       </tr> 69       <tr> 70        <td>用户名</td> 71        <td> 72         <input type="text" name="user" size="35px" id="user" onfocus="showTips('user','用户名必填!')" onblur="check('user','用户名不能为空!')"/><span id="userspan"></span> 73        </td> 74       </tr> 75       <tr> 76        <td>密码</td> 77        <td> 78         <input type="password" name="password" size="35px" id="password" onfocus="showTips('password','密码必填!')" onblur="check('password','密码不能为空!')"/><span id="passwordspan"></span> 79        </td> 80       </tr> 81       <tr> 82        <td>确认密码</td> 83        <td> 84         <input type="password" name="repassword" size="35px" id="repassword"/> 85        </td> 86       </tr> 87       <tr> 88        <td>E-mail</td> 89        <td> 90         <input type="text" name="e-mail" size="35px" id="email"/> 91        </td> 92       </tr> 93       <tr> 94        <td>姓名</td> 95        <td> 96         <input type="text" name="username" size="35px"/> 97        </td> 98       </tr> 99       <tr>100        <td>性别</td>101        <td>102         <input type="radio" name="sex" value="男"/>男103         <input type="radio" name="sex" value="女"/>女104        </td>105       </tr>106       <tr>107        <td>出生日期</td>108        <td>109         <input type="text" name="birthday" size="35px"/>110        </td>111       </tr>112       <tr>113        <td>验证码</td>114        <td>115         <input type="text" name="yzm" />116         <img src="../img/yanzhengma.png" />117        </td>118       </tr>119       <tr align="center">120        <td colspan="2">121         <input type="submit" value="注册" />122        </td>123       </tr>124      </table>125      </form>126     </td>127    </tr>128    129    <!--4.广告图片-->130    <tr>131     <td>132      <img src="../img/footer.jpg" width="100%"/>133     </td>134    </tr>135    136    <!--5.友情链接和版权信息-->137    <tr>138     <td align="center">139      <a href="#"><font>关于我们</font></a>140      <a href="#"><font>联系我们</font></a>141      <a href="#"><font>招贤纳士</font></a>142      <a href="#"><font>法律声明</font></a>143      <a href="#"><font>友情链接</font></a>144      <a href="#"><font>支付方式</font></a>145      <a href="#"><font>配送方式</font></a>146      <a href="#"><font>服务声明</font></a>147      <a href="#"><font>广告声明</font></a>148      <p>149       Copyright © 2005-2016 hh商城 版权所有 150      </p>151     </td>152    </tr>153   </table>154  </body>155 </html>

在浏览器内运行,效果如下:

光标点击到用户名输入框,提示用户名必填!

当用户名未输入内容时提示不能为空!

当填写都正确时则不提示。