js2

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



JS

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

// 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";
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值