JavaScript实现仿网易通行证表单验证

介绍一下表单验证，不错哦：

如图

CSS代码

@charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:0;margin:0;} #header,#main{ width:650px; margin:0 auto; } .bg{ background-image:url(../images/register_bg.gif); background-repeat:no-repeat; width:6px; height:6px; } .bg_top_left{ background-position:0px 0px; } .bg_top_right{ background-position:0px -6px; } .bg_end_left{ background-position:0px -12px; } .bg_end_right{ background-position:0px -18px; } .bg_top{ border-top:solid 1px #666666; } .bg_end{ border-bottom:solid 1px #666666; } .bg_left{ border-left:solid 1px #666666; } .bg_right{ border-right:solid 1px #666666; } .content{ padding:10px; } .inputs{ border:solid 1px #a4c8e0; width:150px; height:15px; } .userWidth{ width:110px; } .content div{ float:left; font-size:12px; color:#000; } dl{ clear:both; } dt,dd{ float:left; } dt{ width:130px; text-align:right; font-size:14px; height:30px; line-height:25px; } dd{ font-size:12px; color:#666666; width:180px; } /*当鼠标放到文本框时，提示文本的样式*/ .import_prompt{ border:solid 1px #ffcd00; background-color:#ffffda; padding-left:5px; padding-right:5px; line-height:20px; } /*当文本框内容不符合要求时，提示文本的样式*/ .error_prompt{ border:solid 1px #ff3300; background-color:#fff2e5; background-image:url(../images/li_err.gif); background-repeat:no-repeat; background-position:5px 2px; padding:2px 5px 0px 25px; line-height:20px; } /*当文本框内容输入正确时，提示文本的样式*/ .ok_prompt{ border:solid 1px #01be00; background-color:#e6fee4; background-image:url(../images/li_ok.gif); background-repeat:no-repeat; background-position:5px 2px; padding:2px 5px 0px 25px; line-height:20px; }

js

// JavaScript Document /*通过ID获取HTML对象的通用方法，使用$代替函数名称*/ function $(elementId){ return document.getElementById(elementId); } /*当鼠标放在通行证用户名文本框时，提示文本及样式*/ function userNameFocus(){ var userNameId=$("userNameId"); userNameId.className="import_prompt"; userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18"; } /*当鼠标离开通行证用户名文本框时，提示文本及样式*/ function userNameBlur(){ var userName=$("userName"); var userNameId=$("userNameId"); var reg=https://www.jb51.net/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/; if(userName.value==""){ userNameId.className="error_prompt"; userNameId.innerHTML="通行证用户名不能为空，请输入通行证用户名"; return false; } if(reg.test(userName.value)==false){ userNameId.className="error_prompt"; userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18"; return false; } userNameId.className="ok_prompt"; userNameId.innerHTML="通行证用户名输入正确"; return true; } /*当鼠标放在密码文本框时，提示文本及样式*/ function pwdFocus(){ var pwdId=$("pwdId"); pwdId.className="import_prompt"; pwdId.innerHTML="密码长度为6-16"; } /*当鼠标离开密码文本框时，提示文本及样式*/ function pwdBlur(){ var pwd=$("pwd"); var pwdId=$("pwdId"); if(pwd.value==""){ pwdId.className="error_prompt"; pwdId.innerHTML="密码不能为空，请输入密码"; return false; } if(pwd.value.length<6 || pwd.value.length>16){ pwdId.className="error_prompt"; pwdId.innerHTML="密码长度为6-16"; return false; } pwdId.className="ok_prompt"; pwdId.innerHTML="密码输入正确"; return true; } /*当鼠标离开重复密码文本框时，提示文本及样式*/ function repwdBlur(){ var repwd=$("repwd"); var pwd=$("pwd"); var repwdId=$("repwdId"); if(repwd.value==""){ repwdId.className="error_prompt"; repwdId.innerHTML="重复密码不能为空，请重复输入密码"; return false; } if(repwd.value!=pwd.value){ repwdId.className="error_prompt"; repwdId.innerHTML="两次输入的密码不一致，请重新输入"; return false; } repwdId.className="ok_prompt"; repwdId.innerHTML="两次密码输入正确"; return true; } /*当鼠标放在昵称文本框时，提示文本及样式*/ function nickNameFocus(){ var nickNameId=$("nickNameId"); nickNameId.className="import_prompt"; nickNameId.innerHTML="1、包含汉字、字母、数字、下划线以及@!#$%&*特殊字符<br/>2、长度为4－20个字符<br/>3、一个汉字占两个字符"; } /*当鼠标离开昵称文本框时，提示文本及样式*/ function nickNameBlur(){ var nickName=$("nickName"); var nickNameId=$("nickNameId"); var k=0; var reg=https://www.jb51.net/^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/; // 匹配昵称 var chinaReg=https://www.jb51.net/[\u4e00-\u9fa5]/g; //匹配中文字符 if(nickName.value==""){ nickNameId.className="error_prompt"; nickNameId.innerHTML="昵称不能为空，请输入昵称"; return false; } if(reg.test(nickName.value)==false){ nickNameId.className="error_prompt"; nickNameId.innerHTML="只能由汉字、字母、数字、下划线以及@!#$%&*特殊字符组成"; return false; } var len=nickName.value.replace(chinaReg,"ab").length; //把中文字符转换为两个字母，以计算字符长度 if(len<4||len>20){ nickNameId.className="error_prompt"; nickNameId.innerHTML="1、长度为4－20个字符<br/>2、一个汉字占两个字符"; return false; } nickNameId.className="ok_prompt"; nickNameId.innerHTML="昵称输入正确"; return true; } /*当鼠标放在关联手机号文本框时，提示文本及样式*/ function telFocus(){ var telId=$("telId"); telId.className="import_prompt"; telId.innerHTML="1、手机号码以13，15，18开头<br/>2、手机号码由11位数字组成"; } /*当鼠标离开关联手机号文本框时，提示文本及样式*/ function telBlur(){ var tel=$("tel"); var telId=$("telId"); var reg=https://www.jb51.net/^(13|15|18)\d{9}$/; if(tel.value==""){ telId.className="error_prompt"; telId.innerHTML="关联手机号码不能为空，请输入关联手机号码"; return false; } if(reg.test(tel.value)==false){ telId.className="error_prompt"; telId.innerHTML="关联手机号码输入不正确，请重新输入"; return false; } telId.className="ok_prompt"; telId.innerHTML="关联手机号码输入正确"; return true; } /*当鼠标放在保密邮箱文本框时，提示文本及样式*/ function emailFocus(){ var emailId=$("emailId"); emailId.className="import_prompt"; emailId.innerHTML="请输入您常用的电子邮箱"; } /*当鼠标离开保密邮箱文本框时，提示文本及样式*/ function emailBlur(){ var email=$("email"); var emailId=$("emailId"); var reg=https://www.jb51.net/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/; if(email.value==""){ emailId.className="error_prompt"; emailId.innerHTML="保密邮箱不能为空，请输入保密邮箱"; return false; } if(reg.test(email.value)==false){ emailId.className="error_prompt"; emailId.innerHTML="保密邮箱格式不正确，请重新输入"; return false; } emailId.className="ok_prompt"; emailId.innerHTML="保密邮箱输入正确"; return true; } /*表单提交时验证表单内容输入的有效性*/ function checkForm(){ var flagUserName=userNameBlur(); var flagPwd=pwdBlur(); var flagRepwd=repwdBlur(); var flagNickName=nickNameBlur(); var flagTel=telBlur(); var flagEmail=emailBlur(); userNameBlur(); pwdBlur(); repwdBlur(); nickNameBlur(); telBlur(); emailBlur(); if(flagUserName==true &&flagPwd==true &&flagRepwd==true &&flagNickName==true&&flagTel==true&flagEmail==true){ return true; } else{ return false; } }

html