JavaScript表单验证二

来源：互联网发布：好老板进销存软件编辑：程序博客网时间：2024/06/05 08:41
<html><head><title>表单验证</title><script type="text/javascript">var uResult = false;var pResult = false;var rpResult = false;//通过ID选择元素的函数function ge(itemId){return document.getElementById(itemId);}window.onload = function(){document.reg.username.onblur = function(){//获取提示span元素var msg = ge('userMsg');//判断是否为空if(this.value==''){msg.innerHTML = '用户名不能为空';msg.style.color = 'red';uResult = false;return ;}//判断用户名长度是否正确if(this.value.length<3||this.value>16){msg.innerHTML = '用户名长度必须在3~16位之间';msg.style.color = 'red';uResult = false;return ;}else{msg.innerHTML = '用户名可用';msg.style.color = 'green';uResult = true;return ;}}//验证密码document.reg.password.onblur = function(){var msg = ge('pwdMsg');//是否为空if(this.value==''){msg.innerHTML = '密码不能为空';msg.style.color = 'red';pResult = false;return ;}//长度if(this.value.length<6||this.value.length>16){msg.innerHTML = '密码的长度必须在6~16位之间';msg.style.color = 'red';pResult = false;return ;}else{msg.innerHTML = '密码可用';msg.style.color = 'green';pResult = true;return ;}}//验证确认密码document.reg.repassword.onblur = function(){var msg = ge('repwdMsg');//判断确认密码是否为空if(this.value==''){msg.innerHTML = '确认密码不能为空';msg.style.color = 'red';rpResult = false;return ;}//判断用户名长度是否正确if(this.value.length<6||this.value.length>16){msg.innerHTML = '确认密码的长度必须在6~16位之间';msg.style.color = 'red';rpResult = false;return ;}//判断确认密码是否跟密码一直if(this.value!=document.reg.password.value){msg.innerHTML = '两次输入的密码不一致';msg.style.color = 'red';rpResult = false;return ;}else{msg.innerHTML = '确认密码可用';msg.style.color = 'green';rpResult = true;return ;}}//上面的任何一个返回false就进入下面的判断，这样就无法提交了！document.reg.onsubmit = function(){var result =true;if(!uResult){document.reg.username.onblur();result = false;}if(!pResult){document.reg.password.onblur();result = false;}if(!rpResult){document.reg.repassword.onblur();result = false;}return result;}}</script></head><body><form action="" method="get" name="reg">用户名：<input type="text" name="username" /><span id="userMsg"></span><br />密码：<input type="password" name="password" /><span id="pwdMsg"></span><br />确认密码：<input type="password" name="repassword" /><span id="repwdMsg"></span><br /><input type="submit" name="sub" value="注册" /></form></body></html>
阅读全文
0 0