表单验证

来源：互联网发布：杨坤空城知乎编辑：程序博客网时间：2024/06/03 20:44
<!DOCTYPE html><html><head>    <meta charset="utf-8"><title>正则表达式</title><style type="text/css">*{margin: 0;padding: 0;font-family: "微软雅黑";}#top{width: 100%;height: 50px;background: #8B3A62;font-size: 20px;text-align: left;text-indent: 30px;line-height: 50px;color: white;}#content{width: 100%;background: #e2e2e2;height: 600px;overflow: hidden;}.wrap{width: 380px;height: 500px;margin: 50px auto;}td{height: 50px;color: gray;}.label{width: 80px;text-align: right;padding-right: 30px;}#btn{width: 380px;height: 100px;text-align: center;}button{width: 80px;height: 30px;margin-top: 50px;border: none;background: #8B3A62;color: white;box-shadow: 0 0 1px 2px gray ;border-radius: 5px;font-size: 18px;}.check{width: 100px;padding-left: 20px;color: red;font-size: 12px;}input{height: 25px;border: none;width: 160px;box-shadow: 0 0 1px 1px gray; }select{width: 160px;height: 25px;}</style></head><body><div id="top">用户注册</div><div id="content"><div class="wrap"><table><tr><td class="label">用户名</td><td><input type="text" name="username"></td><td class="check"></td></tr><tr><td class="label">密码</td><td><input type="text" name="password"></td><td class="check"></td></tr><tr><td class="label">确认密码</td><td><input type="text" name="repassword"></td><td class="check"></td></tr><tr><td class="label">姓名</td><td><input type="text" name="name"></td><td class="check"></td></tr><tr><td class="label">性别</td><td><select><option>男</option><option>女</option></select></td><td class="check"></td></tr><tr><td class="label">身份证号</td><td><input type="text" name="idCard"></td><td class="check"></td></tr><tr><td class="label">邮箱</td><td><input type="text" name="mail"></td><td class="check"></td></tr><tr><td class="label">手机号</td><td><input type="text" name="tele"></td><td class="check"></td></tr></table><div id="btn"><button id="subbtn">提交</button></div></div></div><script type="text/javascript">(function(){var usernamePattern=/^[a-zA-Z]\w{5,19}$/;var username=document.getElementsByName('username')[0];username.onblur=function(){if(usernamePattern.test(username.value)){username.parentNode.nextElementSibling.innerHTML='ok';}else if(/^[^a-zA-Z]/.test(username.value)){username.parentNode.nextElementSibling.innerHTML='以字母开头';}else{username.parentNode.nextElementSibling.innerHTML='6-20位';}}})();(function(){var passwordPattern=/^[^\s]{6,18}$/;var password=document.getElementsByName('password')[0];password.onblur=function(){if(passwordPattern.test(password.value)){password.parentNode.nextElementSibling.innerHTML='ok';}else if(/\s/.test(password.value)){password.parentNode.nextElementSibling.innerHTML='不能有空格';}else{password.parentNode.nextElementSibling.innerHTML='6-18位';}}})();(function(){var password=document.getElementsByName('password')[0];var repassword=document.getElementsByName('repassword')[0];repassword.onblur=function(){if(repassword.value!=password.value||password.value==''){repassword.parentNode.nextElementSibling.innerHTML='密码不一致';}else{repassword.parentNode.nextElementSibling.innerHTML='ok';}}})();(function(){var namePattern=/^[\u4e00-\u9fa5]{2,4}$/;var name=document.getElementsByName('name')[0];name.onblur=function(){if(namePattern.test(name.value)){name.parentNode.nextElementSibling.innerHTML='ok';}else{name.parentNode.nextElementSibling.innerHTML='2-4位汉字';}}})();(function(){var idCardPattern=/^\d{14}$|^\d{17}[\dx]$/;var idCard=document.getElementsByName('idCard')[0];idCard.onblur=function(){if(idCardPattern.test(idCard.value)){idCard.parentNode.nextElementSibling.innerHTML='ok';}else{idCard.parentNode.nextElementSibling.innerHTML='格式不正确';}}})();(function(){var mailPattern=/^\w+([.\-_]\w+)*@\w+(\.\w+)+$/;var mail=document.getElementsByName('mail')[0];mail.onblur=function(){if(mailPattern.test(mail.value)){mail.parentNode.nextElementSibling.innerHTML='ok';}else{mail.parentNode.nextElementSibling.innerHTML='格式不正确';}}})();(function(){var telePattern=/^(13[0-9]|15[0-3,5-9]|18[0,2,5-9]|147)\d{8}$/;var tele=document.getElementsByName('tele')[0];tele.onblur=function(){if(telePattern.test(tele.value)){tele.parentNode.nextElementSibling.innerHTML='ok';}else{tele.parentNode.nextElementSibling.innerHTML='格式不正确';}}})();function btn(){var inputList=document.getElementsByTagName('input');console.log(inputList);for(var i=0;i<inputList.length;i++){if(inputList[i].parentNode.nextElementSibling.innerHTML!='ok'){alert('请填写正确后提交');return;}}alert('提交成功');}document.getElementById('subbtn').onclick=btn;</script></body></html>
阅读全文
0 0