JS之表单验证

window.onload = function(){
//初始化这些方法 ?function init(){ ???????truenameFocus(); ???????truenameBlur(); ???????phoneFocus(); ???????phoneBlur(); ???????emailFocus(); ???????emailBlur(); ???????qqFocus(); ???????qqBlur(); ???????usernameFocus(); ???????usernameBlur(); ???????pwFocus(); ???????pwBlur(); ???????surepwFocus(); ???????surepwBlur(); ???????checkForm();}//姓名验证 ???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(); ?}

.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;}

<!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>