JavaScript之表单验证

来源：互联网发布：爆菊感受知乎编辑：程序博客网时间：2024/05/21 18:39
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>*{outline: none;}.field label{display: inline-block;width:80px;}#agree+label{display: inline;}.success{border:1px solid #5eb95e;}.fail{border:1px solid #dd514c;}/*伪类设置 元素聚焦时样式*/input[type=text]:focus,input[type=password]:focus{border:1px solid royalblue;}span{color:#f00;}</style></head><body><form action="doReg.html" id="f1"><div class="field"><label for="username">账号:</label><input type="text"  id="username" name="username" onblur="req(this,'vname')"/><span id="vname"></span></div><div class="field"><label for="password">密码:</label><input type="password" id="password" name="password"  onblur="len(this,'vpass')"/><span id="vpass"></span></div><div class="field"><label for="repassword">重复密码:</label><input type="password" id="repassword" name="repassword"   onblur="validateRepass(this,$('password'),'vrepass')"/><span id="vrepass"></span></div><div class="field"><label for="email">邮箱地址:</label><input type="text" id="email" name="email"  onblur="validateEmail(this,'vemail')"/><span id="vemail"></span></div><div class="field"><label for="phone">手机号:</label><input type="text" id="phone" name="phone" onblur="validatePhone(this,'vphone')"/><span id="vphone"></span></div><div class="field"><input type="checkbox" name="agree" id="agree" /><label for="agree">已阅读<a href="">协议</a>条款，是否同意</label></div><div class="field"><input type="button" onclick="beginSubmit()" value="注册"><!--<input type="submit" name="" id="" value="注册 />--></div></form><script>function sub(){alert("准备提交");return false;}/* 表单验证的必要性: 1.如果表单不在前端验证，后端验证压力就会增加 2.提高程序运行效率，前端验证发生在客户端浏览器  事件： onclick onscroll onfocus  获取焦点事件 onblur  失去焦点事件*/var errorMsg = {require:'当前项不能为空，请填写',len:'长度应该是8~12之间',email:'邮箱格式不正确',phone:'手机号格式不正确',repass:'两次密码不一致'};//验证必填项function req(nameBox,label){console.info(label+'=====')//获取输入框中的值var name = nameBox.value;if(name.length > 0){nameBox.className = 'success'; //为输入框设置正确样式$(label).textContent='';//将验证消息置空return true; //为提交按钮能否正确提交提供判断依据}else{nameBox.className = 'fail';//为输入框设置错误样式$(label).textContent=errorMsg.require;//显示提示信息return false;}}//长度验证function len(nameBox,label){var name = nameBox.value;if(name.length >= 8 && name.length <= 12){nameBox.className = 'success'; //为输入框设置正确样式$(label).textContent='';//将验证消息置空return true; //为提交按钮能否正确提交提供判断依据}else{nameBox.className = 'fail';//为输入框设置错误样式$(label).textContent=errorMsg.len;//显示提示信息return false;}}//手机号验证function validatePhone(nameBox,label){//先做必填验证var result = req(nameBox,label);if(result){//判断格式if(/^1[3578]\d{9}$/.test(nameBox.value)){nameBox.className = 'success'; //为输入框设置正确样式$(label).textContent='';//将验证消息置空result = true;}else{nameBox.className = 'fail';//为输入框设置错误样式$(label).textContent=errorMsg.phone;//显示提示信息result = false;}}return result;}//邮箱验证function validateEmail(nameBox,label){//先做必填验证var result = req(nameBox,label);if(result){//判断格式if(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(nameBox.value)){nameBox.className = 'success'; //为输入框设置正确样式$(label).textContent='';//将验证消息置空result = true;}else{nameBox.className = 'fail';//为输入框设置错误样式$(label).textContent=errorMsg.email;//显示提示信息result = false;}}return result;}function validateRepass(nameBox,realpass,label){var repass = nameBox.value;var pass = realpass.value;if(repass == pass){nameBox.className = 'success'; //为输入框设置正确样式$(label).textContent='';//将验证消息置空return true;}else{nameBox.className = 'fail';//为输入框设置错误样式$(label).textContent=errorMsg.repass;//显示提示信息return false;}}function beginSubmit(){var f1 = req($('username'),'vname');var f2 = len($('password'),'vpass');var f3 = validateRepass($('repassword'),$('password'),'vrepass');var f4 = validateEmail($('email'),'vemail');var f5 = validatePhone($('phone'),'vphone');var f6 = $('agree').checked;if(!f6){alert('必须同意协议条款!');return false;}if(f6 && f1 && f2 && f3 && f4 && f5){//提交表单$('f1').submit();}}function $(id){return document.getElementById(id);}</script></body></html>
阅读全文
0 0