JS之表单验证
js表单验证是目前前端必不可少用到的检测方法，现在我就发一下我用到的常见的几种，例如，姓名验证，手机号验证，邮箱验证，用户名验证，密码验证，确认密码验证，用到了正则表达式,下面是一套完整的网页代码~
js代码：
window.onload = function(){
//初始化这些方法 function init(){ truenameFocus(); truenameBlur(); phoneFocus(); phoneBlur(); emailFocus(); emailBlur(); qqFocus(); qqBlur(); usernameFocus(); usernameBlur(); pwFocus(); pwBlur(); surepwFocus(); surepwBlur(); checkForm();
canelPage(); } //点击取消按钮就刷新
function canelPage(){
var canel = document.getElementById("customer_canel");
canel.onclick = function(){
window.location.reload;//刷新页面
}
}
//姓名验证 function truenameFocus() { var truename = document.getElementById("input_truename"); var hinttruename = document.getElementById("hint_truename"); truename.onfocus = function () { hinttruename.style.color = "#999999"; hinttruename.innerHTML = "请输入真实姓名~"; } } function truenameBlur() { var truename = document.getElementById("input_truename"); var hinttruename = document.getElementById("hint_truename"); var reg = /^[\u0391-\uFFE5]+$/;//只能输入中文 truename.onblur = function () { if (truename.value == "") { hinttruename.innerHTML = "姓名不能为空"; hinttruename.style.color = "red"; return false; } if (reg.test(truename.value) == false) { hinttruename.innerHTML = "请输入中文~"; hinttruename.style.color = "red"; return false; } hinttruename.innerHTML = "名字格式正确"; hinttruename.style.color = "green"; return true; } } // 手机号验证 function phoneFocus() { var phone = document.getElementById("input_phone"); var hintphone = document.getElementById("hint_phone"); phone.onfocus = function () { hintphone.innerHTML = "请输入11位正确的手机号码~"; hintphone.style.color = "#999999"; } } function phoneBlur() { var phone = document.getElementById("input_phone"); var hintphone = document.getElementById("hint_phone"); var reg = /^[0-9]+$/;//只能输入数字 phone.onblur = function () { if (phone.value == "") { hintphone.innerHTML = "手机号码不能为空~"; hintphone.style.color = "red"; return false; } if (phone.value.substring(0, 1) !== "1" || reg.test(phone.value) == false) { hintphone.innerHTML = "请输入正确的手机号~"; hintphone.style.color = "red"; return false; } if (phone.value.length > 11 || phone.value.length < 11) { hintphone.innerHTML = "手机号码应是11位~~"; hintphone.style.color = "red"; return false; } hintphone.innerHTML = "手机号通过~"; hintphone.style.color = "green"; return true; } } //邮箱验证 function emailFocus() { var email = document.getElementById("input_email"); var hintemail = document.getElementById("hint_email"); email.onfocus = function () { hintemail.innerHTML = "请输入您的常用邮箱~"; hintemail.style.color = "#999999"; } } function emailBlur() { var email = document.getElementById("input_email"); var hintemail = document.getElementById("hint_email"); var reg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;//邮箱格式的检测 email.onblur = function () { if (email.value == "") { hintemail.innerHTML = "邮箱不能为空~"; hintemail.style.color = "red"; return false; } if (reg.test(email.value) == false) { hintemail.innerHTML = "邮箱的格式不正确~"; hintemail.style.color = "red"; return false; } hintemail.innerHTML = "邮箱格式正确,验证通过~"; hintemail.style.color = "green"; return true; } } //qq验证 function qqFocus() { var qq = document.getElementById("input_qq"); var hintqq = document.getElementById("hint_qq"); qq.onfocus = function () { hintqq.innerHTML = "请输入您的QQ号~"; hintqq.style.color = "#999999"; } } function qqBlur() { var qq = document.getElementById("input_qq"); var hintqq = document.getElementById("hint_qq"); // var regu = /^[1][0-9][0-9]{9}$/;//检测手机号码的表达式，以1开头 // var reg = new RegExp(regu); var reg = /^\d+$/;//只能是数字 qq.onblur = function () { if (qq.value == "") { hintqq.innerHTML = "QQ号不能为空~"; hintqq.style.color = "red"; return false; } if (reg.test(qq.value) == false) { hintqq.innerHTML = "请输入正确的QQ号~"; hintqq.style.color = "red"; return false; } hintqq.innerHTML = "QQ通过~"; hintqq.style.color = "green"; return true; } } //昵称验证 function usernameFocus() { var username = document.getElementById("input_username"); var hintusername = document.getElementById("hint_username"); username.onfocus = function () { hintusername.innerHTML = "由汉字、字母、数字、下划线组成~"; hintusername.style.color = "#999999"; } } function usernameBlur() { var username = document.getElementById("input_username"); var hintusername = document.getElementById("hint_username"); //由数字，字母，或下划线组成的字符串 var regu = "^[0-9a-zA-Z\_]+$"; var reg = new RegExp(regu); var chinaReg = /[\u4e00-\u9fa5]/g; //匹配中文字符 username.onblur = function () { if (username.value == "") { hintusername.innerHTML = "昵称不能为空"; hintusername.style.color = "red"; return false; } if (reg.test(username.value) == false && chinaReg.test(username.value) == false) { hintusername.innerHTML = "只能由汉字、字母、数字、下划线组成"; hintusername.style.color = "red"; return false; } var len = username.value.replace(chinaReg, "ab").length; if (len > 20 || len < 4) { hintusername.innerHTML = "长度为4－20个字符"; hintusername.style.color = "red"; return false; } hintusername.innerHTML = "昵称输入正确"; hintusername.style.color = "green"; return true; } } //密码验证 function pwFocus() { var pw = document.getElementById("input_pw"); var hintpw = document.getElementById("hint_pw"); pw.onfocus = function () { hintpw.innerHTML = "密码长度6~16个字符"; hintpw.style.color = "#999999"; } } function pwBlur() { var pw = document.getElementById("input_pw"); var hintpw = document.getElementById("hint_pw"); pw.onblur = function () { if (pw.value == "") { hintpw.innerHTML = "密码不能为空,请输入6~16位密码~"; hintpw.style.color = "red"; return false; } if (pw.value.length > 16 || pw.value.length < 6) { hintpw.innerHTML = "密码长度为6~16位"; hintpw.style.color = "red"; return false; } hintpw.innerHTML = "密码格式输入正确~"; hintpw.style.color = "green"; return true; } } //确认密码验证 function surepwFocus() { var surepw = document.getElementById("input_surepw"); var hintsurepw = document.getElementById("hint_surepw"); surepw.onfocus = function () { hintsurepw.innerHTML = "密码长度6~16个字符"; hintsurepw.style.color = "#999999"; } } function surepwBlur() { var surepw = document.getElementById("input_surepw"); var pw = document.getElementById("input_pw"); var hintsurepw = document.getElementById("hint_surepw"); surepw.onblur = function () { if (surepw.value == "") { hintsurepw.innerHTML = "确认密码不能为空,请输入6~16位密码~"; hintsurepw.style.color = "red"; return false; } if (surepw.value != pw.value) { hintsurepw.innerHTML = "两次输入的密码不一致,请重新输入~"; hintsurepw.style.color = "red"; return false; } hintsurepw.innerHTML = "两次密码输入正确~"; hintsurepw.style.color = "green"; return true; } } //表单提交的时候验证表单内容输入的有效性 function checkForm() { var flagtruename = truenameBlur(); var flagphoneblur = phoneBlur(); var flagemail = emailBlur(); var flagusername = usernameBlur(); var flagpw = pwBlur(); var flagsurepw = surepwBlur(); var btn_sure = document.getElementById("customer_surebtn"); btn_sure.onclick = function () { if (flagtruename == true && flagphoneblur == true && flagemail == true && flagusername == true && flagpw == true && flagsurepw == true) { return true; } else { return false; } } } init(); }
css代码:
.customeradd_box{ width: 800px; height: 500px; border: 1px solid #C7C9CA; position:fixed; top: 20%; left: 20%; text-align: center; font-weight: 400; font-family:"微软雅黑"; font-size:20px; color: #187EC4; display: none; background-color: #ffffff; z-index: 999; } .customeradd_title{ width: 800px; height: 70px; line-height: 60px; } .customeradd_left{ width: 350px; text-align: center; float: left; margin-left: 48px; border-right: 1px dashed #C7C9CA; } .customeradd_left li,.customeradd_right li{ width:340px; height: 55px; line-height: 50px; } .twoul li{ float: left; width: 120px; } .customeradd_left input,.customeradd_right input{ width: 200px; height: 35px; font-size: 15px; border-radius: 3px; border: 1px solid #C7C9CA; } .customeradd_left select,.customeradd_right select{ width: 200px; height: 35px; font-size: 15px; border-radius: 3px; } .customeradd_right{ width: 350px; text-align: center; float: right; margin-right: 48px; } .customer_bottom{ width: 340px; height:60px; text-align: center; line-height: 60px; position: relative; bottom: 5px; left: 220px; } button{ width: 68px; height: 40px; background-color:#00A1E7; color: #ffffff; font-size: 17px; border: none; margin: 20px; cursor: pointer; } button:focus{ outline: none; } button:hover{ background-color: #0986BC; }
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>客服设置</title> <link rel="stylesheet" href="../static/css/common/reset.css"> <link rel="stylesheet" href="../static/css/ymr/customersetting.css"> </head> <body> <!--添加客服账号--> <div class="customeradd_box" id="customeradd_boxx"> <div class="customeradd_title"> <span>添加客服</span> </div><!--customeradd-title结束--> <div class="customeradd_left"> <!--<span>基本信息</span>--> <ul> <li> <ul class="twoul"><li></li><li>基本信息</li></ul> </li> <li> <ul class="twoul"><li >姓名</li><li><input type="text" id="input_truename"></li></ul> </li> <li class="customeradd_hint" id="hint_truename">请输入您的真实姓名</li> <li> <ul class="twoul"><li>性别</li><li><select><option>男</option><option>女</option></select></li></ul> </li> <li class="customeradd_hint"></li> <li> <ul class="twoul"><li>手机号</li><li><input type="text" id="input_phone"></li></ul> </li> <li class="customeradd_hint" id="hint_phone">请输入你的11位真实手机号~</li> <li> <ul class="twoul"><li>邮箱</li><li><input type="text" id="input_email"></li></ul> </li> <li class="customeradd_hint" id="hint_email">请输入您的QQ邮箱~</li> <li> <ul class="twoul"><li>QQ</li><li><input type="text" id="input_qq"></li></ul> </li> <li class="customeradd_hint" id="hint_qq">请输入您的QQ~</li> </ul> </div> <div class="customeradd_right"> <!--<span>其他信息</span>--> <ul> <li> <ul class="twoul"><li></li><li>其他信息</li></ul> </li> <li> <ul class="twoul"><li>昵称</li><li><input type="text" id="input_username"></li></ul> </li> <li class="customeradd_hint" id="hint_username">包含汉字、字母、数字、下划线</li> <li> <ul class="twoul"><li>工号</li><li><input type="text"></li></ul> </li> <li class="customeradd_hint"></li> <li> <ul class="twoul"><li>密码</li><li ><input type="password" id="input_pw" ></li></ul> </li> <li class="customeradd_hint" id="hint_pw">6~18个字符，可使用字母、数字、下划线</li> <li> <ul class="twoul"><li>确认密码</li><li ><input type="password" id="input_surepw" ></li></ul> </li> <li class="customeradd_hint" id="hint_surepw"></li> <li> <ul class="twoul"><li>服务类别</li><li><select> <option>维修类</option> <option>造船类</option> <option>救助类</option> <option>法律类</option> <option>技术类</option> <option>订单类</option> </select></li> <li class="customeradd_hint" ></li> </ul> </li> </ul> </div> <div style="clear: both"></div> <div class="customer_bottom"> <button class="customer_sure" id="customer_surebtn">确认</button> <button class="customer_canel" id="customer_quxiao">取消</button> </div> </div><!--customeradd_box结束--> <script src="../static/js/common/common.js"></script> <script src="../static/js/ymr/customersetting.js"></script> </body>
