代码虽然有重复，但是重要的是思想和正则表达式的用----------<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf8"><title>表单验证</title><style type="text/css"> input[type=text], input[type=password] { width: 150px; height: 15px; } </style><script type="text/javascript"> /** *账户验证方法 * */ function usernameCheck(){ var text = trim(document.getElementById('username').value);//获取用户输入的内容 var span = document.getElementById('usernameSpan'); var guize = /^\w{6,16}$/; var msg = ""; if(!text){ msg = "帐户名必须填写"; }else if(!guize.test(text)){ msg = "账户格式不合法6-16位"; } //如果用户输入有误 错误信息要写入到span 标签内 span.innerHTML = msg; span.parentNode.parentNode.style.color = msg == ""?"black":"red"; return msg == ""; } function passwordCheck(){ var text = trim(document.getElementById('password').value);//获取用户输入的内容 var span = document.getElementById('passwordSpan'); var guize = /^\w{6,32}$/; var msg = ""; if(!text){ msg = "密码必须填写"; }else if(!guize.test(text)){ msg = "密码格式不合法"; } //如果用户输入有误 错误信息要写入到span 标签内 span.innerHTML = msg; span.parentNode.parentNode.style.color = msg == ""?"black":"red"; return msg == ""; } function confirmCheck(){ var password = document.getElementById('password').value; //获取第一次输入的密码 var confirm = document.getElementById('confirm').value; var span = document.getElementById('confirmSpan'); var msg = ""; if (password != confirm) { msg = "密码不一致"; } span.innerHTML = msg; span.parentNode.parentNode.style.color = msg == ""?"black":"red"; return msg == ""; } function emailCheck(){ var text = document.getElementById('email').value;//获取用户输入的内容 var span = document.getElementById('emailSpan'); var guize = /^([\w.-]+)\@([a-zA-Z0-9.-]+)\.([\w]{2,4})$/; var msg = ""; if(!text){ msg = "邮箱必须填写"; }else if(!guize.test(text)){ msg = "邮箱格式不合法"; } //如果用户输入有误 错误信息要写入到span 标签内 span.innerHTML = msg; span.parentNode.parentNode.style.color = msg == ""?"black":"red"; return msg == ""; } function eduCheck(){ var text = document.getElementById('edu').value;//获取用户输入的内容 var span = document.getElementById('eduSpan'); var msg = ""; if(!text){ msg = "学历必须选择"; } span.innerHTML = msg; span.parentNode.parentNode.style.color = msg == ""?"black":"red"; return msg == ""; } function genderCheck(){ var text = document.getElementsByName('gender');//获取用户输入的内容 var span = document.getElementById('genderSpan'); var msg = ""; if(!text[0].checked && !text[1].checked){ msg = "性别必须选择"; } span.innerHTML = msg; span.parentNode.parentNode.style.color = msg == ""?"black":"red"; return msg == ""; } function interestCheck(){ var text = document.getElementsByName('interest');//获取用户输入的内容 var span = document.getElementById('interestSpan'); var msg = ""; if(!text[0].checked && !text[1].checked && !text[2].checked ){ msg = "兴趣必须选择"; } span.innerHTML = msg; span.parentNode.parentNode.style.color = msg == ""?"black":"red"; return msg == ""; } function trim(str){ str = str.replace(/^\s+/,""); str = str.replace(/\s+$/,""); return str; } function checkAll(){ var fUserName = usernameCheck(); var fUserPass = passwordCheck(); var fUserConfirm = confirmCheck(); var fUserEmail = emailCheck(); var fUserEdu = eduCheck(); var fUserGender = genderCheck(); var fUserInterest = interestCheck(); return fUserName && fUserPass && fUserConfirm && fUserEmail && fUserEdu && fUserGender && fUserInterest; } </script></head><body> <fieldset style="width: 500px; margin: 0px auto;"> <b>注册新用户</b> <form action="success.html" method="post" onsubmit="return checkAll();"> <table align="center" width="500" cellpadding="5" > <tr> <td width="30%" align="right">账户:</td> <td> <input type="text" id="username" onblur="usernameCheck()"> <span id="usernameSpan"></span> </td> </tr> <tr> <td align="right">密码:</td> <td> <input type="password" id="password" onblur="passwordCheck()"> <span id="passwordSpan"></span><!-- 提醒错误信息 --> </td> </tr> <tr> <td align="right">确认密码:</td> <td> <input type="password" id="confirm" onblur="confirmCheck()"> <span id="confirmSpan"></span> </td> </tr> <tr> <td align="right">邮箱号:</td> <td> <input type="text" id="email" onblur="emailCheck()"> <span id="emailSpan"></span> </td> </tr> <tr> <td align="right">学历:</td> <td> <select id="edu" onchange="eduCheck()"> <option value="">-请选择学历-</option> <option value="bj">本科</option> <option value="cd">研究生</option> <option value="gz">博士</option> </select> <span id="eduSpan"></span> </td> </tr> <tr> <td align="right">性别:</td> <td> <label><input type="radio" name="gender" value="male" onclick="genderCheck()" > 男 </label> <label><input type="radio" name="gender" value="female" onclick="genderCheck()"> 女 </label> <span id="genderSpan"></span> </td> </tr> <tr> <td align="right">兴趣:</td> <td> <label><input type="checkbox" name="interest" value="somke" onclick="interestCheck()"> 吃饭 </label> <label><input type="checkbox" name="interest" value="drink" onclick="interestCheck()"> 睡觉 </label> <label><input type="checkbox" name="interest" value="tangtou" onclick="interestCheck()"> 打豆豆 </label> <span id="interestSpan"></span> </td> </tr> <tr> <td align="center" colspan="2"><input type="submit" value="注册新用户"></td> </tr> </table> </form> </fieldset> <script type="text/javascript"></script></body></html>
谁借莪１个温暖的怀抱￠
朱雀
╰+攻爆jí腚メ
淩亂°似流年
灰太狼
小灰灰
还没有评论，来说两句吧...