注册表单
<!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:#0066FF 1px solid;width:600px;border-collapse:collapse;}table td,table th{border:#0066FF 1px solid;padding:10px;}table td{background-color:#FFFF99;}table th{background-color:#FF9900;}#repswspan{margin-left:110px;}.errorinfo{color:#FF0000;display:none;}.focus{border:#0099FF 2px solid;}.norm{border:#999999 1px solid;}.error{border:#FF0000 2px solid;}</style><script type="text/javascript">function inputColor(input){input.className = "norm";input.onfocus = function(){this.className = "focus";}}window.onload = function(){with(document.forms[0]){inputColor(user);inputColor(psw);inputColor(repsw);inputColor(mail);}}//校验方法。function check(inputNode,regex,divId){var b = false;var divNode = document.getElementById(divId);if(regex.test(inputNode.value)){inputNode.className = "norm";divNode.style.display = "none";b = true;}else{inputNode.className = "error";divNode.style.display = "block";}return b;}/*//校验用户名,老式！，麻烦！，已过气。function checkUserDemo(userNode){var value = userNode.value;var regex = /^\w{3,5}$/;var divNode = document.getElementById("userdiv");if(regex.test(value)){userNode.className = "norm";divNode.style.display = "none";}else{userNode.className = "error";divNode.style.display = "block";}}*///校验用户名function checkUser(userNode){var regex = /^\w{3,5}$/;return check(userNode,regex,"userdiv");}//校验密码function checkPsw(pswNode){var regex = /^[a-z0-9]{3,5}$/i;return check(pswNode,regex,"pswdiv");}//校验确认密码 function checkRepsw(repswNode){var b = false;var value1 = repswNode.value;var value2 = document.getElementsByName("psw")[0].value;var divNode = document.getElementById("repswdiv");if(value1==value2){repswNode.className = "norm";divNode.style.display = "none";b = true;}else{repswNode.className = "error";divNode.style.display = "block";}return b;}//校验mailfunction checkMail(mailNode){var regex = /^\w+@\w+(\.\w+)+$/;return check(mailNode,regex,"maildiv");}//校验表单function checkForm(formNode){with(formNode){if(checkUser(user) && checkPsw(psw) && checkRepsw(repsw) && checkMail(mail))event.returnValue = true;elseevent.returnValue = false;}}</script></head><body><!--1,定义页面通过表格来格式化表单。 表格行都有一个自己的背景颜色。 将单元格中的数据通过div进行封装。以便操作。2，定义样式。表格的样式。 div的样式。3，动态效果。3.1在页面加载时，将所有的输入框默认的框线颜色以及定义获取焦点时的框线颜色。 3.2进行内容校验。可以通过正则表达式完成，并通过框线的样式给用户提示。 通过对刚才用户名的校验的分析，发现代码重复度很高，为了提高复用性。 将不同的内容错误参数传递，将相同的内容进行函数的封装。--><form onsubmit="checkForm(this)"><table> <tr> <th>注册表单</th> </tr> <tr> <td> <div>用户名</div> <div><input type="text" name="user" onblur="checkUser(this)" /></div> <div id="userdiv">用户名错误，请按要求输入</div> <div>用户名必须是3-5位，由字母(a-z)，数字(0-9)，下划线(_)组成</div> </td> </tr> <tr> <td> <div><span>密码</span> <span id="repswspan">确认密码</span></div> <div> <input type="password" name="psw" onblur="checkPsw(this)" /> <input type="password" name="repsw" onblur="checkRepsw(this)" /> </div> <div id="pswdiv">密码格式错误，请按规范输入</div> <div id="repswdiv">两次密码输入不一致</div> <div>密码必须是3-5位，由字母(a-z)，数字(0-9)，组成</div> </td> </tr> <tr> <td> <div>邮件地址</div> <div><input type="text" name="mail" onblur="checkMail(this)" /></div> <div id="maildiv">邮箱地址错误，请按要求填写</div> </td> </tr> <tr> <th> <input type="submit" value="提交数据" /> </th> </tr> </table></form></body></html>?