<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表单校验完善</title> <style type="text/css"> table{ border:#999 solid 1px; width:700px; border-collapse:collapse;/*单边框*/ } table th,table td{ border:#0C9 solid 1px; } table th{ background-color:#09F; } table td{ background-color:#CFF; } #confirm{ margin-left:122px; } .errorInfo{ display:none; color:#F00; } .normal{ border:#999 solid 1px; } .focus{ border:#09F solid 2px; } .redError{ border:#F00 solid 2px; } </style> </head> <!-- 1,表单页面 table格式化表单 2,css美化表单 3,动态效果 在页面加载时,将所有的输入框加入默认的框线以及定义获取焦点时的框线颜色 4,脚本+dom完成表单的校验功能 4.1进行内容校验,通过正则表达式完成,并通过框线的颜色给用户提示 4.2通过分析发现代码的重复性很高,所以把相同的部分进行封装,不同的地方进行抽取 --> <script type="text/javascript"> //输入框加入框线 function inputColor(input) { input.className = "normal"; input.onfocus = function() { this.className = "focus"; } } window.onload = function() { with(document.forms[0]) { inputColor(user); inputColor(pwd); inputColor(rePwd); inputColor(mail); } } //用户名校验,老式校验,代码冗长 /*function checkName(userNode) { var value = userNode.value; var nameReg = /^\w{3,5}$/; var userDiv = document.getElementById("userDiv"); if(nameReg.test(value)) { userNode.className = "normal"; userDiv.style.display = "none"; } else { userNode.className = "redError"; userDiv.style.display = "block"; } }*/ //校验方法 function check(inputNode,reg,div) { var b = false; var value = inputNode.value; var div = document.getElementById(div) if(reg.test(value)) { inputNode.className = "normal"; div.style.display = "none"; b = true; } else { inputNode.className = "redError"; div.style.display = "block"; return false; } return b; } //用户名校验 function checkName(userNode) { var nameReg = /^\w{3,5}$/; return check(userNode,nameReg,"userDiv"); } //密码校验 function checkPwd(pwdNode) { var pwdReg = /^[0-9a-z]{3,5}$/i; return check(pwdNode,pwdReg,"pwdDiv"); } //确认密码校验 function checkRePwd(rePwd) { var b = false; var pwd2 = rePwd.value; var pwd1 = document.forms[0].pwd.value; //alert(pwd1); var rePwdDiv = document.getElementById("rePwdDiv"); //alert(rePwdDiv.nodeName); if(pwd2==pwd1) { rePwd.className = "normal"; rePwdDiv.style.display = "none"; b = true; } else { rePwd.className = "redError"; rePwdDiv.style.display = "block"; } return b; } //校验邮箱 function checkMail(mailNode) { //var value = mailNode.value; //alert(value); var mailReg = /^\w+@\w+(\.\w+)+$/; return check(mailNode,mailReg,"mailDiv"); } //表单第二次校验,加强安全注册 function checkAll(formNode) { with(formNode) { if(checkName(user) && checkPwd(pwd) && checkRePwd(rePwd) && checkMail(mail)) return true; else return false; } } </script> <body> <form action="www.baidu.com" method="get" οnsubmit=" return checkAll(this)"> <table> <tr> <th>注册表单</th> </tr> <tr> <td> <div>用户名</div> <div><input type="text" name="user" οnblur="checkName(this)"/></div> <div class="errorInfo" id="userDiv">用户名错误,请安要求输入</div> <div>用户名必须是3-5位,由数字(0-9),字母(a-z),下划线(_)组成</div> </td> </tr> <tr> <td> <div><span>密码</span> <span id="confirm">确认密码</span></div> <div> <input type="text" name="pwd" οnblur="checkPwd(this)"/> <input type="text" name="rePwd" οnblur="checkRePwd(this)"/> </div> <div class="errorInfo" id="pwdDiv">密码格式错误,请按规范输入</div> <div class="errorInfo" id="rePwdDiv">两次密码输入的不一致</div> <div>密码必须是3-5位,由数字(0-9),字母(a-z)组成</div> </td> </tr> <tr> <td> <div>邮件地址</div> <div><input type="text" name="mail" οnblur="checkMail(this)"/></div> <div class="errorInfo" id="mailDiv">邮件地址错误,请按要求输入</div> </td> </tr> <tr> <th><input type="submit" value="提交" /></th> </tr> </table> </form> </body> </html>
表单校验html+js
最新推荐文章于 2022-11-24 16:34:30 发布