JavaScript学习——完善注册页面表单校验
2017-08-19 22:08
731 查看
1、之前我们已经使用弹出框的方式实现了表单校验的功能,但是此种方式用户体验效果很差
我们希望做成把提示信息和校验结果放在输入栏的后面。
2、步骤分析 (此案例基于HTML&CSS——网站注册页面实现的)
第一步:确定事件(onfocus 聚焦事件)并为其绑定一个函数
第二步:书写绑定函数(在输入框的后面给出提示信息)
第三步:确定事件(onblur 离焦事件)并为其绑定一个函数
第四步:书写函数(对数据进行校验,分别给出提示)
JS代码:(传入参数的目的减少重复代码,增加通用性)
HTML代码:
<input type="text" name="user" size="35px" id="user" onfocus="showTips('user','用户名必填!')" onblur="check('user','用户名不能为空!')"/><span id="userspan"></span>
最终代码如下:
在浏览器内运行,效果如下:
光标点击到用户名输入框,提示用户名必填!
当用户名未输入内容时提示不能为空!
当填写都正确时则不提示。
我们希望做成把提示信息和校验结果放在输入栏的后面。
2、步骤分析 (此案例基于HTML&CSS——网站注册页面实现的)
第一步:确定事件(onfocus 聚焦事件)并为其绑定一个函数
第二步:书写绑定函数(在输入框的后面给出提示信息)
第三步:确定事件(onblur 离焦事件)并为其绑定一个函数
第四步:书写函数(对数据进行校验,分别给出提示)
JS代码:(传入参数的目的减少重复代码,增加通用性)
<script> function showTips(id,info){ document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>"; } function check(id,info){ //1.获取用户输入的用户名数据 var uValue=document.getElementById(id).value; //2.进行校验 if(uValue==""){ document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>"; }else{ document.getElementById(id+"span").innerHTML=""; } } </script>
HTML代码:
<input type="text" name="user" size="35px" id="user" onfocus="showTips('user','用户名必填!')" onblur="check('user','用户名不能为空!')"/><span id="userspan"></span>
最终代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> <script> function showTips(id,info){ document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>"; } function check(id,info){ //1.获取用户输入的用户名数据 var uValue=document.getElementById(id).value; //2.进行校验 if(uValue==""){ document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>"; }else{ document.getElementById(id+"span").innerHTML=""; } } </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="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </td> </tr> </table> </td> </tr> <!--2.导航栏部分--> <tr height="50px" > <td bgcolor="black"> <a href="#"><font size="3" color="white">首页</font></a> <a href="#"><font color="white">手机数码</font></a> <a href="#"><font color="white">电脑办公</font></a> <a href="#"><font color="white">鞋靴箱包</font></a> <a href="#"><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" onfocus="showTips('user','用户名必填!')" onblur="check('user','用户名不能为空!')"/><span id="userspan"></span> </td> </tr> <tr> <td>密码</td> <td> <input type="password" name="password" size="35px" id="password" onfocus="showTips('password','密码必填!')" onblur="check('password','密码不能为空!')"/><span id="passwordspan"></span> </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="#"><font>关于我们</font></a> <a href="#"><font>联系我们</font></a> <a href="#"><font>招贤纳士</font></a> <a href="#"><font>法律声明</font></a> <a href="#"><font>友情链接</font></a> <a href="#"><font>支付方式</font></a> <a href="#"><font>配送方式</font></a> <a href="#"><font>服务声明</font></a> <a href="#"><font>广告声明</font></a> <p> Copyright © 2005-2016 hh商城 版权所有 </p> </td> </tr> </table> </body> </html>
在浏览器内运行,效果如下:
光标点击到用户名输入框,提示用户名必填!
当用户名未输入内容时提示不能为空!
当填写都正确时则不提示。
相关文章推荐
- JavaScript学习——使用JS完成注册页面表单校验
- 教你一天玩转JavaScript(五)——使用JavaScript完成注册页面表单提示及校验
- JavaScript 完成注册页面表单校验的实例
- <Java Web学习初级阶段>JavaScript实现注册页面的表单验证
- JavaScript、CSS、HTML 实现用户注册页面与信息校验
- JavaScript——注册表单参考模板(含参数格式校验)
- JavaScript:使用JavaScript 实现注册表单的校验
- javascript——js前台用户注册页面校验
- JavaScript学习笔记1---焦点定位在页面表单第一个字段
- jQuery formValidator 表单校验插件4.1.1高仿网易邮箱注册页面(已发演示链接)
- struts学习:传统方法完成struts注册表单校验与回显数据
- JavaScript实现注册页面的表单验证
- 今天起学习CI框架--写了一个很不完善注册页面
- JavaScript、CSS、JSP 实现用户注册页面与信息校验
- JavaScript框架之AngularJS学习——表单校验
- 使用JS完成注册页面表单简单校验
- JavaScript学习笔记1---焦点定位在页面表单第一个字段
- 仿凤凰网的注册页面,javascript完成简单的空/邮箱格式/字符串的长度校验 ajax完成服务器端是否同名校验
- 正则表达式及js校验表单代码(注册页面)
- 使用Js完成注册页面表单校验