注册页面(html js)

最新推荐文章于 2020-05-06 18:08:57 发布

原创最新推荐文章于 2020-05-06 18:08:57 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

WEB开发专栏收录该内容

6 篇文章

订阅专栏

var randHid=true;
$(document).ready(function() {
	$('#rand_div').hide();
	randHid=true;
	
	$('#rand').focus(function (){
		if(randHid=true){
			$('#rand_div').show();
			randHid=false;
		}
	});	
});

function checkIdcard(idcardx){
var area={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"} 

var idcard = idcardx.toUpperCase();
var Y,JYM;
var S,M;
var idcard_array = new Array();
idcard_array = idcard.split("");
//地区检验
if(area[parseInt(idcard.substr(0,2))]==null) return 4;
//身份号码位数及格式检验
switch(idcard.length){
case 15:
if ( (parseInt(idcard.substr(6,2))+1900) % 4 == 0 || ((parseInt(idcard.substr(6,2))+1900) % 100 == 0 && (parseInt(idcard.substr(6,2))+1900) % 4 == 0 )){
ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;//测试出生日期的合法性
} else {
ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;//测试出生日期的合法性
}
if(ereg.test(idcard)) return 0;
else return 2;
break;
case 18:
//18位身份号码检测
//出生日期的合法性检查 
//闰年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))
//平年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))
if ( parseInt(idcard.substr(6,4)) % 4 == 0 || (parseInt(idcard.substr(6,4)) % 100 == 0 && parseInt(idcard.substr(6,4))%4 == 0 )){
ereg=/^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;//闰年出生日期的合法性正则表达式
} else {
ereg=/^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;//平年出生日期的合法性正则表达式
}
if(ereg.test(idcard)){//测试出生日期的合法性
//计算校验位
S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7
+ (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9
+ (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10
+ (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5
+ (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8
+ (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4
+ (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2
+ parseInt(idcard_array[7]) * 1 
+ parseInt(idcard_array[8]) * 6
+ parseInt(idcard_array[9]) * 3 ;
Y = S % 11;
M = "F";
JYM = "10X98765432";
M = JYM.substr(Y,1);//判断校验位
if(M == idcard_array[17]) return 0; //检测ID的校验位
else return 3;
}
else return 2;
break;
default:
return 1;
break;
}
}

function per15To18(perIDSrc){

   var iS = 0;

   var iW = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
   var LastCode="10X98765432";
   var perIDNew;

   perIDNew = perIDSrc.substring(0,6);
   perIDNew += "19";

   perIDNew += perIDSrc.substring(6,perIDSrc.length);
   for( var i=0; i<17; i++){
		iS += parseInt(perIDNew.substring(i,i+1)) * iW[i];
   }

   var iY = iS%11;
   perIDNew += LastCode.substring(iY,iY+1);
   return perIDNew;
  }

function checkUserName(s){
	//alert("s："+s);
	var patrn=/^[a-z]{1}[a-z0-9]{5,15}$/;
	if (patrn.exec(s)){
		return true
	}else{
		return false
	}
}

function checkCellPhone(s){
	var patrn=/^1[0-9]{10}$/;
	if (patrn.exec(s)){
		return true
	}else{
		return false
	}
}

function newnotEmail(name){//
	var str,re;
	re=/([\w|-]+[\.?\w|-]*@[\w|-]+\.[\w|-]+)(\.?[\w|-]*)(\.?[\w|-]*)/i;

	re.exec(name.replace(/(^\s*)|(\s*$)/g,""));
	if (RegExp.$3!=""&&RegExp.$3!="."&&RegExp.$2!=".")
		str=RegExp.$1+RegExp.$2+RegExp.$3;
	else
		if (RegExp.$2!=""&&RegExp.$2!=".")
			str=RegExp.$1+RegExp.$2 ;
		else
			str=RegExp.$1 ;
	if (str!=name.replace(/(^\s*)|(\s*$)/g,"")) {
		return true;
	}else{
		//判断yahoo邮箱逻辑
		if(name.indexOf('@yahoo.com.cn')>0||name.indexOf('@yahoo.cn')>0){
			return true;
		}else{
            return false;
        }
	}
}

function checkIsChinese(str)
{
    var pattern = /^[\u4E00-\u9FA5]{2,5}$/i;
    if (pattern.test(str))
    {        
        return true;
    }
    else
        return false;
}

function checkPasswd(s){
	//alert("s："+s);
	var patrn=/^[a-zA-Z0-9]{6,16}$/;
	if (patrn.exec(s)){
		return true
	}else{
		return false
	}
}



function checkForm(randflag){
	var FStr = document.forms["register"];
	if(isNull(FStr.username,"请输入完美通行证!")) return false;
    if(FStr.username.value.length>=6&&FStr.username.value.substring(0,6)=="wltest"){
		alert("输入用户名已被注册!");
		FStr.username.focus();
		return false;
	}
	if(randflag=="self"&&!checkUserName(FStr.username.value)){
		alert("输入用户名不符合命名规则!");
		FStr.username.focus();
		return false;
	}
	if(randflag=="email"&&newnotEmail(FStr.username.value)){
		alert("输入用户名不符合命名规则!");
		FStr.username.focus();
		return false;
	}
	if(randflag=="mobile"&&!checkCellPhone(FStr.username.value)){
		alert("输入用户名不符合命名规则!");
		FStr.username.focus();
		return false;
	}

	if(isNull(FStr.passwd,"请输入密码!")) return false;
	if(!checkPasswd(FStr.passwd.value)){
		alert("输入密码不符合命名规则!");
		FStr.passwd.focus();
		return false;
	}
	if(isNull(FStr.repeatpasswd,"请输入确认密码!")) return false;
	if(FStr.passwd.value!=FStr.repeatpasswd.value){
		alert("两次输入密码不一致!");
		FStr.repeatpasswd.focus();
		return false;
	}
	if(FStr.passwd.value==FStr.username.value){
		alert("用户名密码不能相同!");
		FStr.passwd.focus();
		return false;
	}
	
	if(randflag=="self"){
		if(isNull(FStr.email,"请输入电子邮箱!")) return false;
		if(newnotEmail(FStr.email.value)){
			alert("请填写非yahoo中国的合法电子邮箱");
			FStr.email.focus();
			return false;
		}
	}
	
//	idcard business logic
	if(isNull(FStr.truename,"请输入真实姓名!")) return false;
	if(checkIsChinese(FStr.truename.value)!=true){
		alert("真实姓名格式不对，必须是2~5个汉字");
		FStr.fcmtruename.focus();
		return false;
	}
	if(isNull(FStr.idnumber,"请输入身份证号!")) return false;
	if(checkIdcard(FStr.idnumber.value)!=0){
		alert("身份证格式不对");
		FStr.idnumber.focus();
		return false;
	}
	if(randflag=="email"){
		trackEvent('1144','email_reg_btn');
	}
	if(randflag=="mobile"){
		trackEvent('1141','mobile_reg_btn');
	}
	if(randflag=="self"){
		trackEvent('1147','normal_reg_btn');
	}
//	ajax submit
	var rand="";
	var email="";
	try{ rand = FStr.rand.value; }catch(e){ }
	try{ email = FStr.email.value; }catch(e){ }
	var data = {username:FStr.username.value,passwd:FStr.passwd.value,idnumber:FStr.idnumber.value,truename:encodeURI(FStr.truename.value),//必填
			    //xtnr:FStr.xtnr.value,whichType:$('input[name=whichType]:checked').val(),tgyidnumber:FStr.tgyidnumber.value,//新手卡
			    email:email,rand:rand,from:"0"};
	$.post("/member/register.do",data,function(ret){
		if(ret.code==1){
			ImgRefresh();
			alert(ret.msg);
			return;
        }else if(ret.code==0){
			window.location.href="/register/success.jsp?msg="+ret.msg;
		}else{
			alert(ret.msg);
		}
	},"json")
}

function ImgRefresh() {
	try{ document.getElementById("randimg").src="/servlet/randImg4register?isnor=1&r=" + Math.random(); }catch(e){}
}

function ImgRefreshFast() {
	try{ document.getElementById("randimg").src="/servlet/randImg4register?r=" + Math.random(); }catch(e){}
}


function checkPassport(type) {
		
		var FStr = document.forms["register"];
		var username = FStr.username.value;
		var a=1;
		var msg = document.getElementById('m'+1);
		
		if(username==""){
    		msg.innerHTML =  "通行证用户名不能为空";
    		hidd_msg(a,"no");
    		return;
  		}
  		
  		if(type=='self'&&!checkUserName(username)){
  			msg.innerHTML = "账号请以字母开头，长度6~16位。可以包含数字、字母。";
  			hidd_msg(a,"no");
  			return;
		}
  		if(type=='mobile'&&!checkCellPhone(username)){
  			msg.innerHTML = "手机号码无效";
  			hidd_msg(a,"no");
  			return;
  		}
  		if(type=='email'&&newnotEmail(username)){
  			msg.innerHTML = "账号请填写非yahoo中国的电子邮箱";
  			hidd_msg(a,"no");
  			return;
  		}

	$.post("/member/checkUser",{username:username},function(isExist){
		if(isExist=="14"){
            msg.innerHTML = "此账号可用";
            hidd_msg(a,"yes");
		}else {
            msg.innerHTML = "此账号已存在";
            hidd_msg(a,"no");
		}
	},"text")
}
//手机注册验证号码

function checkPasswdonkeyup2(a) {
	var form1 = document.register;
	var msg = document.getElementById('m'+a);

	if(form1.passwd.value==form1.username.value){
		msg.innerHTML = "用户名密码不能相同";
		hidd_msg(a,"no");
		return;
	}
	
	if (!checkPasswd(form1.passwd.value)) {
		msg.innerHTML = "密码不符合规则";
		hidd_msg(a,"no");
	} else {
		msg.innerHTML = "<em id='strength_L' class='ash'>低</em><em id='strength_M' class='ash'>中</em><em id='strength_H' class='ash'>高</em>";
		hidd_msg(a,"");
		pwStrength(form1.passwd.value);
	}
}

function checkrepeatPasswdonkeyup2(a) {
	var form1 = document.register;
	var msg = document.getElementById('m'+a);
	if(form1.passwd.value.length>0){
		if (form1.passwd.value!=form1.repeatpasswd.value) {
		msg.innerHTML = "两次输入密码不相同";
		hidd_msg(a,"no");
	} else {
		msg.innerHTML = "两次输入密码相同";
		hidd_msg(a,"yes");
	}
	}
	
}

function checkEmail(a){
	var form1 = document.register;
	var msg = document.getElementById('m'+a);
	
	if(form1.email.value==""){
		msg.innerHTML = "Email地址不能为空";
		hidd_msg(a,"no");
		return;
	}
	if(form1.email.value.length>60){
		msg.innerHTML = "Email地址过长，支持60位";
		hidd_msg(a,"no");
		return;
	}
	if(newnotEmail(form1.email.value)){
			msg.innerHTML = "请填写非yahoo中国的合法电子邮箱";
			hidd_msg(a,"no");
	}else{
		msg.innerHTML = "Email可以使用";
		hidd_msg(a,"yes");
	}
}

function truenameTest(a){
	var form1 = document.register;
	var temp = form1.truename.value;
	var hintelement = document.getElementById('m'+a);
	
	if(temp==""){
		hintelement.innerHTML = "真实姓名不能为空";
		hidd_msg(a,"no");       
	}else if(checkIsChinese(temp)!=true){
		hintelement.innerHTML = "真实姓名格式不对，必须是2~5个汉字";
		hidd_msg(a,"no"); 
	}else{
		hintelement.innerHTML = "真实姓名通过";
		hidd_msg(a,"yes");
	}
}
function checkIdnumber(a){
	var form1 = document.register;
	var temp = form1.idnumber.value;
	var msg = document.getElementById('m'+a);
	if(temp.length==0){
		msg.innerHTML = "身份证件不能为空";
		hidd_msg(a,"no");
		return false;
	}
	if(checkIdcard(temp)!=0){
		msg.innerHTML = "身份证号格式不正确！";
		hidd_msg(a,"no");
	}else if(isTeenager(temp)){//需要填防沉迷，提示并且显示
		msg.innerHTML = "身份证号年龄小于18岁，将被纳入防沉迷系统。";
		hidd_msg(a,"yes");
	}else{
		hidd_msg(a,"yes");
		msg.innerHTML = "身份证验证通过";
	}
}

function isTeenager(temp){
	if(temp.length == 15){
		temp = per15To18(temp);	
	}
	var year = Number(temp.substring(6,10)) + 18;
	var month = Number(temp.substring(10,12)) - 1;
	var day = Number(temp.substring(12,14));
	
	var myDate=new Date();
	myDate.setFullYear(year, month, day);
	var today = new Date();
	if (myDate > today) {
		return true;
	}else{
		return false;
	}
}

function checkrandimg(a){
	var form1 = document.register;
	var temp = form1.rand.value;
	var msg = document.getElementById('m'+a);
	
	if(temp.length<4){
        msg.innerHTML = "";
		msg.className="yes";
		msg.style.display="none";
		return;
	}
	
	var url = "/member/checkRandomImg"; 
    var str = "randimg=" + temp;
	
	$.post("/member/checkRandomImg",{randimg:temp,isnor:1},function(isExist){
		if(isExist=="1"){
            hidd_msg(a,"yes");
		}else {
            hidd_msg(a,"no");
		}
	},"text")
}

function checkrandimgFast(a){
	var form1 = document.register;
	var temp = form1.rand.value;
	var msg = document.getElementById('m'+a);
	
	if(temp.length<6){
        msg.innerHTML = "";
		msg.className="yes";
		msg.style.display="none";
		return;
	}
	
	var url = "/member/checkRandomImg"; 
    var str = "randimg=" + temp;
	
	$.post("/member/checkRandomImg",{randimg:temp},function(isExist){
		if(isExist=="1"){
            hidd_msg(a,"yes");
		}else {
            hidd_msg(a,"no");
		}
	},"text")
}

function isNull(name,str){

	  if(name.value==""){
	    alert(str);
	    name.focus();
	    return true;
	  }
	  return false;
	}

function trackEvent(k,v){
	try{
    _mtxq.push(['_trackActionEvent',k,v]);
	}catch(e){
	}
}

<!DOCTYPE html>    
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>完美世界通行证</title>
<script src="/script/js.js" type="text/javascript"></script>
<script src="/script/common.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/master.css" />
<link href="http://www.wanmei.com/public/style/wmol_menu.css" rel="stylesheet" type="text/css" />
</head>
<body onload="trackEvent('1146','normal_reg_load')">




<!DOCTYPE html>

<head>
<meta charset="utf-8" />
<meta name="author" content="Design:Yu.yang; Web Layout:zhigang.Wang;" />
<script type="text/javascript" src="http://www.wanmei.com/public/js/wm.js" bottom="0"></script>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>完美世界 - 成为全球最大的在线游戏供应商</title>
<link href="http://www.wanmei.com/public/style/wmol_menu.css" rel="stylesheet" type="text/css" />
<style>
@import url('http://www.wanmei.com/public/style/wm.css');
</style>
</head>

<body>
<div class="wm_com_menu menu_for_passport">
  <div class="wm_com_menu_main">
    <div class="wm_com_logo"><a href="http://passport.wanmei.com"><img src="http://www.wanmei.com/public/images/logo/wmol/wm_member_logo.png" alt="会员中心"></a></div>
    
    <div class="wm_com_logininfo">[<a href="/index.jsp">登录</a>]</div>
    <div class="wm_com_nav"><span class="cor_l"></span><span class="cor_r"></span>
      <ul class="wm_com_mainnav">
        <li class=""><a href="http://www.wanmei.com" target="_blank">首页</a></li>
        <li><a href="http://pay.wanmei.com" target="_blank">充值中心</a></li>
        <li class="on"><a href="http://passport.wanmei.com" target="_blank">会员中心</a></li>
        <li class=""><a href="http://www.wanmei.com/games/" target="_blank">游戏中心</a></li>
        <li class=""><a href="http://shop.wanmei.com" target="_blank">完美商城</a></li>
        <li class=" nobg"><a href="http://cs.wanmei.com" target="_blank">客服中心</a></li>
      </ul>
      <ul class="wm_com_subnav">
        <li class=""><a href="http://passport.wanmei.com"><span><em>会员中心首页</em></span></a></li>
        <li><a href="/jsp/member/pass.jsp"><span><em>账号管理</em></span></a></li>
        <li class=""><a href="/jsp/charge/index.jsp"><span><em>充值管理</em></span></a></li>
        <li class=""><a href="http://www.wanmei.com/zhanghao/index.html"><span><em>账号安全</em></span></a></li>
       <!--  <li class=""><a href="http://sample.leadphp.com/wanmei/user.php"><span><em>商城管理</em></span></a></li>
        <li class=" nobg"><a href="http://10.14.0.16:33083/demo/"><span><em>我的地盘</em></span></a></li>-->
      </ul>
    </div>
  </div>
</div>
</body>
</html>

<div class="head">
	<span class="back"><a href="/index.jsp">返回通行证首页</a></span>
</div>
<div id="regbox">
	<div class="tabbtn tabtre">
    	<a href="phone.jsp" title="手机账号注册"></a>
        <a href="email.jsp" title="邮箱账号注册"></a>
        <a href="self.jsp" title="个性账号注册"></a>
    </div>
    <form action="" method="post" name="register">
    <input type="hidden" name="xtnr" id="xtnr" value="0"/>
	<div class="regmid">
    	<div class="regtop">
        	<div class="regfot">
            	<div class="formbox borbom">
                	<dl class="formdl">
                    	<dt>账号：</dt>
                        <dd class="inpbox"><input type="text" name="username" maxlength="16" onfocus="show_msg(1);" onblur="checkPassport('self');" value="" tabindex="1"/></dd>
                    	<dd class="text">
                        	<label id="z1">由6-16位小写英文字母及数字组成，首位为字母</label>
                            <label id="m1"></label>
                        </dd>
                    </dl>
                    <dl class="formdl">
                    	<dt>密码：</dt>
                        <dd class="inpbox"><input type="password" name="passwd" maxlength="16" onkeyup="checkPasswdonkeyup2(2)" onfocus="show_msg(2);" tabindex="2"/></dd>
                    	<dd class="text">
                        	<label id="z2">由6-16位英文字母及数字组成</label>
							<label id="m2"></label>
                        </dd>
                    </dl>
                    <dl class="formdl">
                    	<dt>确认密码：</dt>
                        <dd class="inpbox"><input type="password" name="repeatpasswd" maxlength="16" onpaste="return false;" onfocus="show_msg(3);" onblur="checkrepeatPasswdonkeyup2(3);" tabindex="3"/></dd>
                    	<dd>
                    	<label id="z3"></label>
						<label id="m3"></label>
						</dd>
                    </dl>
                </div>
                <div class="formbox borbom">
                	<dl class="formdl">
                    	<dt>电子邮箱：</dt>
                        <dd class="inpbox"><input type="text" name="email" onfocus="show_msg(5);" onblur="checkEmail(5);" value="" tabindex="4"/></dd>
                    	<dd class="text">
                        	<label id="z5">该邮箱是找回账号密码的<span class="red">重要依据</span></label>
							<label id="m5"></label>
                        </dd>
                    </dl>
                    <dl class="formdl">
                    	<dt>真实姓名：</dt>
                        <dd class="inpbox"><input type="text" name="truename" maxlength="7" onblur="truenameTest(8);" value="" tabindex="5"/></dd>
                    	<dd class="text">
                        	<label id="z8"></label>
							<label id="m8"></label>
                        </dd>
                    </dl>
                     <dl class="formdl">
                    	<dt>身份证号：</dt>
                        <dd class="inpbox"><input type="text" name="idnumber" onblur="checkIdnumber(11)" tabindex="6" maxlength="18" /></dd>
                    	<dd class="text">
                        	 <label id="z11"></label>
							 <label id="m11"></label>
                        </dd>
                    </dl>
                    <dl class="formdl " id="yzm">
	                    <dt>验证码：</dt> 
	                    <dd class='inpbox'><input type='text' id='rand' name='rand' placeholder="点击显示验证码" onkeyup='checkrandimg(7);' autocomplete='off' tabindex='7'/></dd> 
	                    <dd class='text' style='display:none;' id='rand_div'> 
                    	 <label><img id='randimg' src='/servlet/randImg4register?isnor=1'/><a href='javascript:ImgRefresh()'>换一张</a></label>
                    	 <label id="m7"></label>
	                    </dd>
                    </dl>
                </div>
                <h3 class="subbox"><a href="javascript:void(0)" onclick="checkForm('self')" class="submit"></a></h3>
                    <h2 class="infomore"><a href="/jsp/member/agreement.htm" target="_blank">《完美通行证用户协议》</a></h2>
            </div>
        </div>
    </div>
    </form>
</div>

<div style="width:888px;margin:20px auto;clear:both">
<iframe src="http://www.wanmei.com/bottom_index3.htm" width="888" height="160" scrolling="no" frameborder="0" allowtransparency="true"></iframe></div>

<script type="text/javascript" src="js/jq_171.js"></script>
<script type="text/javascript" src="js/jquery.placeholder.1.3.min.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<script charset="utf-8" src="/script/register_new.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){	
	$.Placeholder.init();
});
</script>
</body>
</html>