描述
一个简单的注册页面，对输入框进行了简单的正则表达式校验
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index2.css" />
<script type="text/javascript" src="js/index2.js" ></script>
</head>
<body>
<h2> 用户注册 </h2>
<form action="check.html" method="post" name="frmReg" id="frmReg" onsubmit="return checkForm()"></form>
<div class="container">
<div>
<label>用户名:</label>
<input type="text" name="txtUn" form="frmReg"
onfocus="showInfo(this,0)"
onblur="check(this,0)"/>
<span class=""></span>
</div>
<div>
<label>密码:</label>
<input type="text" name="txtPwd1" form="frmReg"
onfocus="showInfo(this,1)"
onblur="check(this,1)" />
<span></span>
</div>
<div>
<label>确认密码:</label>
<input type="text" name="txtPwd2" form="frmReg"
onfocus="showInfo(this,2)"
onblur="check(this,2)"/>
<span></span>
</div>
<div>
<label>手机:</label>
<input type="text" name="txtPhone" form="frmReg"
onfocus="showInfo(this,3)"
onblur="check(this,3)"/>
<span></span>
</div>
<div>
<label>邮箱:</label>
<input type="text" name="txtEmail" form="frmReg"
onfocus="showInfo(this,4)"
onblur="check(this,4)" />
<span></span>
</div>
<div>
<label>性别:</label>
<input type="radio" name="radS" id="radM" value="M" checked form="frmReg"/><label for="radM">男</label>
<input type="radio" name="radS" id="radF" value="F" form="frmReg"/><label for="radF">女</label>
</div>
<div>
<label>籍贯:</label>
<select name="selSheng" form="frmReg">
<option value="0">安徽</option>
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">广西</option>
<option value="4">山东</option>
</select>
<select name="selShi" form="frmReg">
<option value="0">安庆</option>
<option value="1">蚌埠</option>
<option value="2">巢湖</option>
<option value="3">池州</option>
</select>
<select name="selXian" form="frmReg">
<option value="0">安庆市</option>
<option value="1">怀宁县</option>
<option value="2">潜山县</option>
<option value="3">宿松县</option>
<option value="3">太湖县</option>
</select>
<span></span>
</div>
<div>
<label> </label>
<input type="checkbox" name="chkXY" id="chkXY" form="frmReg"/>
<label for="chkXY"> 同意 XXX 协议</label>
</div>
<div>
<label> </label>
<input type="image" name="btn1" src="img/register.jpg" form="frmReg"
onclick=" return checkForm(); " />
</div>
</div>
</body>
</html>
h2{
text-align: center;
}
.container
{
width: 650px;
padding: 10px;
margin: 20px auto;
border: #F00 solid 1px;
/**/
font-size: 14px;
font-family: "微软雅黑";
}
.container>div
{
padding-top: 8px;
padding-bottom: 5px;
background-color: #eeFFee ;
margin-bottom: 5px;
}
.container>div>*
{
display: inline-block;
vertical-align: middle;
}
/*********************************************** 文字说明 ： <label> ****/
.container>div>label:first-child
{
width: 80px;
text-align: right;
}
/*********************************************** 文本框 ****/
.container>div>input[name^="txt"]
{
width: 200px;
height: 24px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
border: #ddddee solid 1px;
border-radius: 3px;
}
/*********************************************** 提示信息 <span> ****/
.container>div>span
{
height: 20px;
line-height: 20px;
padding-right: 5px;
padding-left: 20px;
border: #999 solid 1px;
color: #666;
font-size: 12px;
background: #fefefe url(../img/info.jpg) no-repeat 2px center;
background-size: 14px 14px;
/**/
display: none;
}
/****************************************************** 用户输入【错误】时的提示信息 **/
.container>div>span.clsSpanError
{
border: #F99 solid 1px;
background: #fFeeee url(../img/error.gif) no-repeat 2px center;
color: #F66;
background-size: 14px 14px;
}
/****************************************************** 用户输入【正确】时的提示信息 **/
.container>div>span.clsSpanRight
{
border: #0d0 solid 1px;
background: #eeFFee url(../img/right.gif) no-repeat 2px center;
color: #0a0;
background-size: 14px 14px;
}
/***************************************************** 验证码 和 图片 ****/
.container>div>input[name="tYzm"]
{
width: 60px;
height: 30px;
line-height: 30px;
}
/***************************************************** 图片按钮 ****/
.container>div>input[type="image"]
{
width: 120px;
height: 40px;
}
var info=new Array(
new Array("用户名为6-18位字母、数字组成","用户名格式错误","格式正确"),
new Array("密码由6-12位数字、字符、特殊符号组成","密码格式错误","格式正确"),
new Array("确认密码必须和密码一致","两次密码输入不一致","格式正确"),
new Array("11位手机号码","手机号格式错误","格式正确"),
new Array("请输入您的常用邮箱","邮箱格式错误","邮箱格式正确")
)
var reg=new Array(
/^[a-zA-Z0-9]{6,18}$/,
/^.{6,12}$/,
/^.{6,12}$/ ,
/^\d{11}$/,
/^\w+@\w+\.\w+$/
)
var flag=new Array(
false,
false,
false,
false,
false
)
function showInfo(obj,index)
{
//找到当前文本框对象的下一个元素
var span=obj.nextElementSibling;
span.innerHTML=info[index][0];
span.className="";//清空正确或错误的样式
span.style.display="inline-block";
}
function check(obj,index)
{
//获得当前文本框的值
var value=obj.value;
var span=obj.nextElementSibling;
//验证当前的文本框的值是否符合正则要求
if(reg[index].test(value) )
{
//是不是确认密码这一列
if(index==2) //确认密码
{
var pwd=document.getElementsByName("txtPwd1")[0].value;
//
//确认密码要确定两次密码是否相同
if(pwd==value)
{
span.innerHTML=info[index][2];
span.className="clsSpanRight";
flag[index]=true;
}
else
{
span.innerHTML=info[index][1];
span.className="clsSpanError";
flag[index]=false;
}
}
else //其它的只需要判断正则
{
span.innerHTML=info[index][2];
span.className="clsSpanRight";
flag[index]=true;
}
}
else
{
span.innerHTML=info[index][1];
span.className="clsSpanError";
flag[index]=false;
}
}
function checkForm()
{
return flag[0]&&flag[1]&&flag[2]&&flag[3]&&flag[4];
}
效果图
