1、之前我们已经使用弹出框的方式实现了表单校验的功能,但是此种方式用户体验效果很差我们希望做成把提示信息和校验结果放在输入栏的后面。2、步骤分析 (此案例基于HTML&CSS——网站注册页面实现的)第一步:确定事件(onfocus 聚焦事件)并为其绑定一个函数第二步:书写 ...
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='/images/loading.gif' data-original="../img/logo2.png" height="47px" /> 33 </td> 34 <td width="33.3%"> 35 <img src='/images/loading.gif' data-original="../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> 51 <a href="#"><font color="white">手机数码</font></a> 52 <a href="#"><font color="white">电脑办公</font></a> 53 <a href="#"><font color="white">鞋靴箱包</font></a> 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> 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='/images/loading.gif' data-original="../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='/images/loading.gif' data-original="../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>
在浏览器内运行,效果如下:
光标点击到用户名输入框,提示用户名必填!
当用户名未输入内容时提示不能为空!
当填写都正确时则不提示。
原标题:JavaScript学习——完善注册页面表单校验
关键词:JavaScript
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。