本文详细介绍了一段用于网页表单验证的JavaScript代码，包括用户名、密码、邮箱等字段的合法性检查，以及密码强度提示、邮箱自动补全等功能。通过实际代码展示了如何使用正则表达式进行数据验证。
js代码
<script type="text/javascript">
var userFlag = false;//true时表示用户名验证通过
var pwdFlag = false;
var ntFlag = false;
var emailFlag = false;
//---------------------------用户名验证-------------------------------------------------------
function getLength(str){
// \x00-xff代表单字节字符。
return str.replace(/[^\x00-\xff]/g, "xx").length;
}
//获取元素
var uName =document.getElementById("uname");
var info_user = document.getElementById("info_user");
var succ_user = document.getElementById("succ_user");
var error_user = document.getElementById("error_user");
var count = document.getElementById('count');
var name_length = 0; //会员名
// uname获取焦点时规则提示
uName.onfocus = function(){
//规则提示显示
info_user.style.display="black";
//成功信息隐藏
succ_user.style.display = "none";
//未通过信息隐藏
error_user.style.display = "none";
}
// 失去焦点时,如果不符合验证要求,提示不合法信息
uName.onkeyup = function(){
count.style.visibility = "visible";
name_length = getLength(this.value);
count.innerHTML = name_length + "个字符";
if(name_length==0){
count.style.display = "none";
}
}
uName.onblur = function(){
//规则提示隐藏
info_user.style.display="none";
//含有非法字符
var reg = /[^\w\u4e00-\u9fa5]/g;
// \w代表“数字、字母（不分大小写）、下划线”，\u4e00-\u9fa5代表汉字。
if(reg.test(this.value)){
error_user.style.display = "block";
error_user.innerHTML = '<i class="err"></i>含有非法字符！';
succ_user.style.display = "none";
}
//不能为空
else if (this.value==""){
error_user.style.display = "block";
succ_user.style.display = "none";
error_user.innerHTML = "<i class='err'></i>不能为空！";
}
//长度超过25个字符
else if (name_length > 20){
error_user.style.display = "block";
succ_user.style.display = "none";
error_user.innerHTML = "<i class='err'></i>长度超过20个字符！";
}
//长度少于6个字符
else if (name_length < 2){
error_user.style.display = "block";
succ_user.style.display = "none";
error_user.innerHTML = "<i class='err'></i>长度少于2个字符！";
}
//OK
else {
succ_user.style.display = "block";
error_user.style.display = "none";
count.style.visibility = "hidden";
}
}
//---------------------密码验证------------------------------------------------------------
var pwd = document.getElementById("pwd");
var pwd2 = document.getElementById("pwd2");
var info_pass = document.getElementById("info_pass");
var succ_pass = document.getElementById("succ_pass");
var error_pass = document.getElementById("error_pass");
var s1 = document.getElementById("s1");//■
var s2 = document.getElementById("s2");//■
var s3 = document.getElementById("s3");//■
var s4 = document.getElementById("s4");//■
var q1 = document.getElementById("q1");//○ 6-20个字符
var q2 = document.getElementById("q2");//○ 只能包含大小写字母、数字和非空格字符
var q3 = document.getElementById("q3");//○ 大、小写字母、数字、非空字符，2种以上
var pwdReg = /^[a-zA-Z0-9]{6,20}$/;
var pReg2 = /[a-zA-Z0-9]/;
var q3Reg1 = /[a-z]/;
var q3Reg2 = /[A-Z]/;
var q3Reg3 = /[0-9]/;
//-----------------------------------------密码强度验证------------------------------------------------
//正则表达式search()函数.字符串中没有正则表达式要匹配的字符串，此函数返回-1。
pwd.onkeydown = function(){
//获取value值
var pVal = this.value;
//对value进行验证
if(pVal.length >= 6 && pVal.length <= 20){
//当value在6-20个字符q1高亮
q1.innerHTML = "●";
//强度验证
//初级条件 字符6个，1种字符
//s1高亮 s4.innerHTML = "初级"
s1.style.color = "green";
s4.innerHTML = "初级";
if(pVal.length >= 8 && ((pVal.search(q3Reg1) != -1 && pVal.search(q3Reg2) != -1) || (pVal.search(q3Reg1) != -1 && pVal.search(q3Reg3) != -1) || (pVal.search(q3Reg3) != -1 && pVal.search(q3Reg2) != -1))){
//中级条件 字符8个，2种字符
//s2高亮 s4.innerHTML = "中级"
s2.style.color = "green";
s4.innerHTML = "中级";
if(pVal.length >= 10 && (pVal.search(q3Reg1) != -1 && pVal.search(q3Reg2) != -1 && pVal.search(q3Reg3) != -1)){
//高级条件 字符10个，3种字符
//s3高亮 s4.innerHTML = "高级"
s3.style.color = "green";
s4.innerHTML = "高级";
}else{
s3.style.color = "#CCCCCC";
s4.innerHTML = "中级";
}
}else{
s2.style.color = "#CCCCCC";
s4.innerHTML = "初级";
}
}else{
//q1出取消高亮
q1.innerHTML = "○";
s1.style.color = "#CCCCCC";
s4.innerHTML = "";
}
//只s包含大小写字母、数字q2高亮
if(pReg2.test(pVal)){
q2.innerHTML = "●";
}else{
q2.innerHTML = "○";
}
//大、小写字母、数字、非空字符，2种以上q2高亮
if((pVal.search(q3Reg1) != -1 && pVal.search(q3Reg2) != -1) || (pVal.search(q3Reg1) != -1 && pVal.search(q3Reg3) != -1) || (pVal.search(q3Reg3) != -1 && pVal.search(q3Reg2) != -1)){
q3.innerHTML = "●";
}else{
q3.innerHTML = "○";
}
}
// pwd获取焦点时规则提示
pwd.onfocus = function(){
//规则提示显示
info_pass.style.display = "block";
//成功信息隐藏
succ_pass.style.display = "none";
//未通过信息隐藏
error_pass.style.display = "none";
}
// 失去焦点时，如果不符合验证要求，提示不合法信息
pwd.onblur = function(){
//验证密码是否合法
//规则提示隐藏
info_pass.style.display = "none";
if(checkPass()){//true通过
pwdFlag = true;
//成功信息显示
succ_pass.style.display = "block";
}else{//未通过验证
//未通过信息显示
error_pass.style.display = "block";
pwdFlag = false;
}
}
//验证密码是否合法
function checkPass(){
//获取value值
var pVal = pwd.value;
//对value值进行正则验证
if(pwdReg.test(pVal)){//true通过
//如果通过 返回true
return true;
}
//未通过返回false
return false;
};
//------------------------------确认密码 --------------------------------------------------
var nt=document.getElementsByName("notpass")[0];
var info_notpass=document.getElementById("info_notpass");//请再一次输入密码！
var error_notpass=document.getElementById("error_notpass");//密码不一致，请重新输入!
var succ_notpass=document.getElementById("succ_notpass");//可用
nt.onfocus=function(){//聚焦显示
info_notpass.style.display="block"
};
nt.onblur=function(){//onblur 事件会在对象失去焦点时发生。
//console.log(pwd.value)
var nval=nt.value;
info_notpass.style.display="none";
if(nval==pwd.value && nval != ""){
succ_notpass.style.display="block"
error_notpass.style.display="none"
ntFlag=true;
return true;
}else{
succ_notpass.style.display="none"
error_notpass.style.display="block"
ntFlag=false;
return false;
}
}
//------------------------------------邮箱验证------------------------------------------------------
var email = document.getElementById("email");
var info_email = document.getElementById("info_email");
var error_email = document.getElementById("error_email");
var succ_email = document.getElementById("succ_email");
var all_email = document.getElementById("all_email");
var all_email_li = all_email.children;
var emailText = document.getElementsByClassName("emailText");
var emailReg = /^\w{3,20}@[0-9a-zA-Z]{2,6}(\.[a-zA-Z]{2,3}){1,2}$/;
// email获取焦点时规则提示
email.onfocus = function(){
//规则提示显示
info_email.style.display = "block";
//成功信息隐藏
succ_email.style.display = "none";
//未通过信息隐藏
error_email.style.display = "none";
}
// 失去焦点时，如果不符合验证要求，提示不合法信息
email.onblur = function(){
//验证邮箱是否合法
//规则提示隐藏
info_email.style.display = "none";
if(checkEmail()){//true通过
emailFlag = true;
//成功信息显示
succ_email.style.display = "block";
error_email.style.display = "none";
}else{//未通过验证
//未通过信息显示
error_email.style.display = "block";
succ_email.style.display = "none";
emailFlag = false;
}
}
/*var obj = {};
obj.onclick = function(){};
obj.onclick();*/
//验证邮箱是否合法
function checkEmail(){
//获取value值
var eVal = email.value;
//对value值进行正则验证
if(emailReg.test(eVal)){//true通过
//如果通过 返回true
return true;
}
//未通过返回false
return false;
}
//------------邮补全系统--------------
var index = 0;
//键盘按下时显示邮箱列表
email.onkeyup = function(e){
var e = e || event;
var code = e.keyCode || e.which || e.charCode;
//显示邮箱列表
all_email.style.display = "block";
//把email的value给
var eVal = this.value;
if(eVal.indexOf("@") != -1){
eVal = eVal.split("@")[0];
}
for (var i = 0; i < emailText.length; i++) {
emailText[i].innerHTML = eVal;
}
for (var i = 0; i < all_email_li.length; i++) {
all_email_li[i].style.background = "white";
}
switch(code){
case 38://向上
//向上查找li,li背景高亮表示选中
//先找最后一个
//all_email_li.style.background="white";
if(index==-1){
index=emailText.length-1;
}else if(index==0){
index=emailText.length-1;
}else{
index--;
}
all_email_li[index].style.background = "#ccc";
break;
case 40:
//向下查找li，li背景高亮表示选中
//先找第一个
if(index == 6){
index = 0;
}else{
index++;
}
all_email_li[index].style.background = "#ccc";
break;
case 13:
//把当前的li所有的文本内容给email文本框
email.value = all_email_li[index].innerText;
//对email.value进行验证
email.onblur();
//
document.onclick();
break;
}
}
//
all_email.onmouseover = function(e){
var e = e || event;
var target = e.target || e.srcElement;
if(target.nodeName == "LI"){
for (var i = 0; i < all_email_li.length; i++) {
all_email_li[i].style.background = "white";
}
target.style.background = "#CCC";
target.onclick = function(){
//把当前的li所有的文本内容给email文本框
//alert(this.innerText);
email.value = this.innerText;
//当前的all_email要隐藏
//对email.value进行验证
email.onblur();
}
}
}
document.onclick = function(){
all_email.style.display = "none";
}
//-----------------------------------------年月日-----------------------------------------
/*
* <dd class="birthday">生 日：
<select id="year" name="year">
<option value="0">-年-</option>
</select>-
<select id="month" name="month">
<option value="0">-月-</option>
</select>-
<select id="day" name="day">
<option value="0">-日-</option>
</select>
<span class="error error_birthday">尚未全部选择，请选择!</span>
</dd>
*/
var year = document.getElementById("year");
var month = document.getElementById("month");
var day = document.getElementById("day");
//页面加载时，加载年份
for (var i = 1900; i <= 2300; i++) {
var options = new Option(i,i);
//console.log(options);
year.appendChild(options);
}
year.onchange = function(){
//console.log(month.options.length)
month.options.length = 1;
day.options.length = 1;
if(this.value == 0){
return;
}
for (var i = 1; i <= 12; i++) {
var options = new Option(i,i);
month.appendChild(options);
}
}
month.onchange = function(){
day.options.length = 1;
var yVal = year.value;
var mVal = this.value;
switch(mVal){
case "1":
case "3":
case "5":
case "7":
case "8":
case "10":
case "12":
getDays(31);
break;
case "4":
case "6":
case "9":
case "11":
getDays(30);
break;
case "2":
if(yVal % 4 == 0 && yVal % 100 != 0 || yVal % 400 == 0){
getDays(29);
}else{
getDays(28);
}
break;
}
}
function getDays(days){
for (var i = 1; i <= days; i++) {
var options = new Option(i,i);
day.appendChild(options);
}
}
//------------------------------------------备注------------------------------------------------------
var tarea = document.getElementById("tarea");
var num = document.getElementById("num");
var okNum = document.getElementById("okNum");
var errNum = document.getElementById("errNum");
var moreNum = document.getElementById("moreNum");
var clear = document.getElementById("clear");
tarea.onkeyup = function(){
var tVal = this.value;
num.innerHTML = 200 - tVal.length;
if(num.innerHTML < 0 ){
okNum.style.display = "none";
errNum.style.display = "block";
moreNum.innerHTML = tVal.length - 200;
}else{
okNum.style.display = "block";
errNum.style.display = "none";
}
}
clear.onclick = function(){
tarea.value = tarea.value.substr(0,200);
errNum.style.display = "none";
okNum.style.display = "block";
num.innerHTML = 0;
}
//当点击提交按钮，表单验证只要有一个未通过验证，无法提交
//var sub = $id("sub"); submit按钮本身就有一个默认提交功能
//提交事件在form中触发。
var sub=document.getElementById("sub");
form.onsubmit = function(){
//alert(1)
//表单验证只要有一个未通过验证，无法提交
//if(用户名验证通过 && 密码通过 && 邮箱通过){
if(userFlag && pwdFlag && emailFlag && ntFlag){
return true;
}else{
return false;
}
}
</script>
css部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<div id="reg">
<h2><img src="img/close.png" alt="关闭" class="close" />会员注册</h2>
<form id="form" action="#" name="reg">
<dl>
<dd>用 户 名：<input id="uname" type="text" name="user" class="text"/>
<span id="info_user" class="info info_user">请输入用户名，2~20位，由字母、数字和下划线组成</span>
<span id="error_user" class="error error_user">输入不合法，请重新输入!</span>
<span id="succ_user" class="succ succ_user">可用</span>
<span id="loading" class="loading">正在检测用户名...</span><br />
<span><label for=""><span></span><b id="count">0个字符</b></label></span>
</dd>
<dd>密 码：<input id="pwd" type="password" name="pass" class="text"/>
<span id="info_pass" class="info info_pass">
<p>安全级别：<strong id="s1" class="s s1">■</strong> <strong id="s2" class="s s2">■</strong> <strong id="s3" class="s s3">■</strong> <strong id="s4" class="s s4" style="font-weight: normal;"></strong></p>
<p><strong id="q1" style="font-weight: normal;">○</strong> 6-20个字符</p>
<p><strong id="q2" style="font-weight: normal;">○</strong> 只能包含大小写字母、数字和非空格字符</p>
<p><strong id="q3" style="font-weight: normal;">○</strong> 大、小写字母、数字、非空字符，2种以上</p>
</span>
<span id="error_pass" class="error error_pass">输入不合法，请重新输入!</span>
<span id="succ_pass" class="succ succ_pass">可用</span>
</dd>
<dd>密码确认：<input id="pwd2" type="password" name="notpass" class="text"/>
<span id="info_notpass" class="info info_notpass">请再一次输入密码！</span>
<span id="error_notpass" class="error error_notpass">密码不一致，请重新输入!</span>
<span id="succ_notpass" class="succ succ_notpass">可用</span>
</dd>
<dd>提 问：
<select name="ques">
<option value="0">----请选择----</option>
<option value="1">--您最喜欢吃的菜</option>
<option value="2">--您的狗狗的名字</option>
<option value="3">--您的出生地</option>
<option value="4">--您最喜欢的明星</option>
</select>
<span class="error error_ques">尚未选择提问，请选择!</span>
</dd>
<dd>回 答：<input type="text" name="ans" class="text"/>
<span class="info info_ans">请输入回答，2~32位！</span>
<span class="error error_ans">回答不合法，请重新输入!</span>
<span class="succ succ_ans">可用</span>
</dd>
<dd>电子邮件：<input id="email" type="text" name="email" class="text" autocomplete="off"/>
<span id="info_email" class="info info_email">请输入电子邮箱！</span>
<span id="error_email" class="error error_email">邮箱不合法，请重新输入!</span>
<span id="succ_email" class="succ succ_email">可用</span>
<ul id="all_email" class="all_email">
<li><span class="emailText"></span>@qq.com</li>
<li><span class="emailText"></span>@163.com</li>
<li><span class="emailText"></span>@souhu.com</li>
<li><span class="emailText"></span>@sina.com.cn</li>
<li><span class="emailText"></span>@gmail.com</li>
<li><span class="emailText"></span>@yahoo.com.cn</li>
<li><span class="emailText"></span>@yeah.net</li>
</ul>
</dd>
<dd class="birthday">生 日：
<select id="year" name="year">
<option value="0">-年-</option>
</select>-
<select id="month" name="month">
<option value="0">-月-</option>
</select>-
<select id="day" name="day">
<option value="0">-日-</option>
</select>
<span class="error error_birthday">尚未全部选择，请选择!</span>
</dd>
<dd style="height: 105px;"><span style="vertical-align: 85px;">备 注：</span><textarea id="tarea" name="ps"></textarea></dd>
<dd id="okNum" style=" display: block;" class="ps">还能输入<strong id="num" class="num">200</strong>字</dd>
<dd id="errNum" style=" display: none;" class="ps">已超过<strong id="moreNum" class="num"></strong>字，<span id="clear" class="clear">清尾</span></dd>
<dd style="padding: 0 0 0 65px;"><input id="sub" type="submit" name="sub" class="submit"/></dd>
</dl>
</form>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
