艺文轩注册页面验证-优快云博客

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>艺文轩注册页面</title>
<link rel="stylesheet" type="text/css" href="CSS/layout.css"/>
<script type="text/javascript" src="js/register.js"></script>
</head>
<body>
<div class="register_message">
<form action="" method="post" id="myform">
<dl class="register_row">
<dt>请输入用户名：</dt>
<dd><input id="txtName" type="text" class="register_input" onFocus="txtNameFocus()" onBlur="txtNameBlur()"></dd>
<dd><div id="txtNameId_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>请输入密码：</dt>
<dd><input id="pwd" type="password" class="register_input" onFocus="pwdFocus()" onBlur="pwdBlur()"></dd>
<dd><div id="pwd_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>再输入一次密码：</dt>
<dd><input id="repwd" type="password" class="register_input" onFocus="repwdFocus()" onBlur="repwdBlur()"></dd>
<dd><div id="repwd_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>请输入您的真实姓名：</dt>
<dd><input id="trueName" type="text" class="register_input" onFocus="trueNameFocus()" onBlur="trueNameBlur()"></dd>
<dd><div id="trueName_prompt"></div></dd>
<dd></dd>
</dl>
<dl class="register_row">
<dt>身份证号码：</dt>
<dd><input id="idcard" type="text" class="register_input" onFocus="idcardFocus()" onBlur="idcardBlur()"></dd>
<dd><div id="idcard_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>电子邮件：</dt>
<dd><input id="email" type="text" class="register_input" onFocus="emailFocus()" onBlur="emailBlur()"></dd>
<dd><div id="email_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>手机号码：</dt>
<dd><input id="telephone" type="text" class="register_input" onFocus="telephoneFocus()" onBlur="telephoneBlur()"></dd>
<dd><div id="telephone_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>邮政编码：</dt>
<dd><input id="postalcod" type="text" class="register_input" onFocus="postalcodFocus()" onBlur="postalcodBlur()"></dd>
<dd><div id="postalcod_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>详细地址：</dt>
<dd><input id="address" type="text" class="register_input" onFocus="addressFocus()" onBlur="addressBlur()"></dd>
<dd><div id="address_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>所在地区：</dt>
<dd><select id="province" onChange="changeCity()" style="width:120px;">
<option>请选择省/城市</option>
</select>
</dd>
<dd><select id="city" style="width:130px;">
<option>请选择城市/地区</option>
</select></dd>
</dl>
<div class="registerBtn"><input id="registerBtn" type="image" src="images/register_btn_out.gif" onMouseOver="btn_over()" onMouseOut="btn_out()"></div>
</form>
</div>

</div>
</div>
</div>

</body>

</html>

======================

// JavaScript Document
/*鼠标在用户名文本框中时*/
function txtNameFocus(){
var txtName=document.getElementById("txtName");
var txtNameId=document.getElementById("txtNameId_prompt");
txtName.className="register_input register_input_Focus";
txtNameId.innerHTML="用户可由大小写英文字母、数字组成，长度为4-20个字符";
txtNameId.className="register_prompt";
}

/*鼠标离开用户名文本框中时*/
function txtNameBlur(){
var txtName=document.getElementById("txtName");
var txtNameId=document.getElementById("txtNameId_prompt");
txtNameId.innerHTML="";
var reg=/^[a-zA-Z0-9]{4,20}$/;
if(txtName.value==""){
txtNameId.innerHTML="用户名为必填项，请输入您的用户名";
txtNameId.className="register_prompt_error";
txtName.className="register_input register_input_Blur";
return false;
}
if(reg.test(txtName.value)==false){
txtNameId.innerHTML="用户格式错误，请用大小写英文字母、数字，长度4-20个字符";
txtNameId.className="register_prompt_error";
txtName.className="register_input register_input_Blur";
return false;
}

txtNameId.className="register_prompt_ok";
txtName.className="register_input";
return true;
}

/*鼠标在email文本框中时*/
function emailFocus(){
var email=document.getElementById("email");
var promptId=document.getElementById("email_prompt");
email.className="register_input register_input_Focus";
promptId.innerHTML="此邮箱将是您登录艺文轩网的账号，并将用来接收验证邮件";
promptId.className="register_prompt";
}

/*鼠标离开email文本框中时*/
function emailBlur(){
var email=document.getElementById("email");
var promptId=document.getElementById("email_prompt");
promptId.innerHTML="";
var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if(email.value==""){
promptId.innerHTML="电子邮件是必填项，请输入您的Email地址";
promptId.className="register_prompt_error";
email.className="register_input register_input_Blur";
return false;
}
if(reg.test(email.value)==false){
promptId.innerHTML="电子邮件格式不正确，请重新输入";
promptId.className="register_prompt_error";
email.className="register_input register_input_Blur";
return false;
}

promptId.className="register_prompt_ok";
email.className="register_input";
return true;
}

/*鼠标在密码文本框中时*/
function pwdFocus(){
var pwd=document.getElementById("pwd");
var pwdId=document.getElementById("pwd_prompt");
pwd.className="register_input register_input_Focus";
pwdId.innerHTML="密码可由大小写英文字母、数字组成，长度6－20个字符";
pwdId.className="register_prompt";
}

/*鼠标离开密码文本框中时*/
function pwdBlur(){
var pwd=document.getElementById("pwd");
var pwdId=document.getElementById("pwd_prompt");
pwdId.innerHTML="";
var reg=/^[a-zA-Z0-9]{6,20}$/;
if(pwd.value==""){
pwdId.innerHTML="密码为必填项，请设置您的密码";
pwdId.className="register_prompt_error";
pwd.className="register_input register_input_Blur";
return false;
}
if(reg.test(pwd.value)==false){
pwdId.innerHTML="密码格式错误，请用大小写英文字母、数字，长度6-20个字符";
pwdId.className="register_prompt_error";
pwd.className="register_input register_input_Blur";
return false;
}

pwdId.className="register_prompt_ok";
pwd.className="register_input";
return true;
}

/*鼠标在再输入一次密码文本框中时*/
function repwdFocus(){
var repwd=document.getElementById("repwd");
var repwdId=document.getElementById("repwd_prompt");
repwd.className="register_input register_input_Focus";
repwdId.innerHTML="再次输入您的密码";
repwdId.className="register_prompt";
}

/*鼠标离开再输入一次密码文本框中时*/
function repwdBlur(){
var pwd=document.getElementById("pwd");
var repwd=document.getElementById("repwd");
var repwdId=document.getElementById("repwd_prompt");
repwdId.innerHTML="";
if(repwd.value==""){
repwdId.innerHTML="请再次输入您的密码";
repwdId.className="register_prompt_error";
repwd.className="register_input register_input_Blur";
return false;
}
if(pwd.value!=repwd.value){
repwdId.innerHTML="两次输入密码不一致，请重新输入";
repwdId.className="register_prompt_error";
repwd.className="register_input register_input_Blur";
return false;
}

repwdId.className="register_prompt_ok";
repwd.className="register_input";
return true;
}

/*鼠标在真实姓名文本框中时*/
function trueNameFocus(){
var trueName=document.getElementById("trueName");
var trueNameId=document.getElementById("trueName_prompt");
trueName.className="register_input register_input_Focus";
trueNameId.innerHTML="此处填写您的真实姓名";
trueNameId.className="register_prompt";
}

/*鼠标离开真实姓名文本框中时*/
function trueNameBlur(){
var trueName=document.getElementById("trueName");
var trueNameId=document.getElementById("trueName_prompt");
trueNameId.innerHTML="";
if(trueName.value==""){
trueNameId.innerHTML="真实姓名为必填项，请输入您的真实姓名";
trueNameId.className="register_prompt_error";
trueName.className="register_input register_input_Blur";
return false;
}
trueNameId.className="register_prompt_ok";
trueName.className="register_input";
return true;
}

/*鼠标在身份证号码文本框中时*/
function idcardFocus(){
var idcard=document.getElementById("idcard");
var idcardId=document.getElementById("idcard_prompt");
idcard.className="register_input register_input_Focus";
idcardId.innerHTML="此处填写您的身份证号码,长度为15或18位";
idcardId.className="register_prompt";
}

/*鼠标离开身份证号码文本框中时*/
function idcardBlur(){
var idcard=document.getElementById("idcard");
var idcardId=document.getElementById("idcard_prompt");
idcardId.innerHTML="";
var reg=/^[0-9]{15}|[0-9]{18}|[0-9]{17}[x,X]$/;
if(idcard.value==""){
idcardId.innerHTML="身份证号码为必填项，请输入您的身份证号码";
idcardId.className="register_prompt_error";
idcard.className="register_input register_input_Blur";
return false;
}
if(reg.test(idcard.value)==false){
idcardId.innerHTML="身份证号码格式错误，身份证号码只能是15或18位数字(尾数x,X)";
idcardId.className="register_prompt_error";
idcard.className="register_input register_input_Blur";
return false;
}

if(!(idcard.length!=15||idcard.length!=18)){
idcardId.innerHTML="身份证号码格式错误，身份证号码只能是15或18位数字(尾数x,X)";
idcardId.className="register_prompt_error";
idcard.className="register_input register_input_Blur";
return false;
}

idcardId.className="register_prompt_ok";
idcard.className="register_input";
return true;
}

/*鼠标在手机号码文本框中时*/
function telephoneFocus(){
var telephone=document.getElementById("telephone");
var telephoneId=document.getElementById("telephone_prompt");
telephone.className="register_input register_input_Focus";
telephoneId.innerHTML="此处填写您的手机号码,必须为11位数字";
telephoneId.className="register_prompt";
}

/*鼠标离开手机号码文本框中时*/
function telephoneBlur(){
var telephone=document.getElementById("telephone");
var telephoneId=document.getElementById("telephone_prompt");
telephoneId.innerHTML="";
var reg=/^[0-9]{11}$/;
if(telephone.value==""){
telephoneId.innerHTML="手机号码为必填项，请输入您的手机号码";
telephoneId.className="register_prompt_error";
telephone.className="register_input register_input_Blur";
return false;
}
if(reg.test(telephone.value)==false){
telephoneId.innerHTML="手机号码格式错误，手机号码只能是11位数字";
telephoneId.className="register_prompt_error";
telephone.className="register_input register_input_Blur";
return false;
}

if(!(telephone.length!=11)){
telephoneId.innerHTML="手机号码格式错误，手机号码只能是11位数字";
telephoneId.className="register_prompt_error";
telephone.className="register_input register_input_Blur";
return false;
}

telephoneId.className="register_prompt_ok";
telephone.className="register_input";
return true;
}

/*鼠标在邮政编码文本框中时*/
function postalcodFocus(){
var postalcod=document.getElementById("postalcod");
var postalcodId=document.getElementById("postalcod_prompt");
postalcod.className="register_input register_input_Focus";
postalcodId.innerHTML="此处填写您的邮政编码,必须为6位数字";
postalcodId.className="register_prompt";
}

/*鼠标离开邮政编码文本框中时*/
function postalcodBlur(){
var postalcod=document.getElementById("postalcod");
var postalcodId=document.getElementById("postalcod_prompt");
postalcodId.innerHTML="";
var reg=/^[0-9]{6}$/;
if(postalcod.value==""){
postalcodId.innerHTML="邮政编码为必填项，请输入您的邮政编码";
postalcodId.className="register_prompt_error";
postalcod.className="register_input register_input_Blur";
return false;
}
if(reg.test(postalcod.value)==false){
postalcodId.innerHTML="邮政编码格式错误，邮政编码只能是6位数字";
postalcodId.className="register_prompt_error";
postalcod.className="register_input register_input_Blur";
return false;
}

if(!(postalcod.length!=6)){
postalcodId.innerHTML="邮政编码格式错误，邮政编码只能是6位数字";
postalcodId.className="register_prompt_error";
postalcod.className="register_input register_input_Blur";
return false;
}

postalcodId.className="register_prompt_ok";
postalcod.className="register_input";
return true;
}

/*鼠标在详细地址文本框中时*/
function addressFocus(){
var address=document.getElementById("address");
var addressId=document.getElementById("address_prompt");
address.className="register_input register_input_Focus";
addressId.innerHTML="此处填写您的详细地址";
addressId.className="register_prompt";
}

/*鼠标离开详细地址文本框中时*/
function addressBlur(){
var address=document.getElementById("address");
var addressId=document.getElementById("address_prompt");
addressId.innerHTML="";
if(address.value==""){
addressId.innerHTML="详细地址为必填项，请输入您的详细地址";
addressId.className="register_prompt_error";
address.className="register_input register_input_Blur";
return false;
}
addressId.className="register_prompt_ok";
address.className="register_input";
return true;
}

/*单击提交注册页面时，对页面内容进行验证*/
function checkRegister(){
txtNameBlur();
pwdBlur();
repwdBlur();
trueNameBlur();
idcardFocus();
emailBlur();
telephoneFocus();
postalcodFocus();
addressFocus();
var flagtxtName=txtNameBlur();
var flagPwd=pwdBlur();
var flagRepwd=repwdBlur();
var flagtrueName=trueNameBlur();
var flagidcard=idcardFocus();
var flagEmail=emailBlur();
var flagtelephone=telephoneFocus();
var flagpostalcod=postalcodFocus();
var flagaddress=addressFocus();
if(flagetxtName==true && flagPwd==true && flagRepwd==true && flagtrueName==true && flagidcard==true && flagEmail==true && flagtelephone==true && flagpostalcod==true&&flagaddress==true){
return true;
}
else{
return false;
}
}

/*所在地的省、城市、地区级联选择*/
var cityList = new Array();
cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山'];
cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];
cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'];
cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];
cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];
cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];
cityList['江苏省'] = ['南京市','苏州市','无锡市'];
cityList['浙江省'] = ['杭州市','宁波市','温州市'];
cityList['四川省'] = ['四川省','成都市'];
cityList['海南省'] = ['海口市'];
cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市'];
cityList['山东省'] = ['济南市','青岛市','烟台市'];
cityList['江西省'] = ['江西省','南昌市'];
cityList['广西省'] = ['柳州市','南宁市'];
cityList['安徽省'] = ['安徽省','合肥市'];
cityList['河北省'] = ['邯郸市','石家庄市'];
cityList['河南省'] = ['郑州市','洛阳市'];
cityList['湖北省'] = ['武汉市','宜昌市'];
cityList['湖南省'] = ['湖南省','长沙市'];
cityList['陕西省'] = ['陕西省','西安市'];
cityList['山西省'] = ['山西省','太原市'];
cityList['黑龙江省'] = ['黑龙江省','哈尔滨市'];
cityList['其他'] = ['其他'];

function changeCity(){
var province=document.getElementById("province").value;
var city=document.getElementById("city");
city.options.length=0; //清除当前city中的选项
for (var i in cityList){
if (i == province){
for (var j in cityList[i]){
try{
city.add(new Option(cityList[i][j],cityList[i][j]),null);
}
catch(e){
city.add(new Option(cityList[i][j],cityList[i][j]));
}
}
}
}
}
function allProvince(){
var province=document.getElementById("province");
for (var i in cityList){
try{
province.add(new Option(i, i),null); //标准方式
}
catch(e){
province.add(new Option(i, i)); //IE
}
}
}
window.onload=allProvince;

/*当鼠标放在提交注册按钮上时，按扭样式*/
function btn_over(){
document.getElementById("registerBtn").src="images/register_btn_over.gif";
}

/*当鼠标离开提交注册按钮上时，按扭样式*/
function btn_out(){
document.getElementById("registerBtn").src="images/register_btn_out.gif";
}

js2