註冊js/jquery驗證

1.首先要思路清晰，下面我說一下思路

首先註冊模塊有3次驗證，一爲填寫信息完後，離開焦點框時驗證，二爲點擊提交按鈕時驗證，最後後臺驗證。

2.錯誤提示信息有3種狀態，正常提示，錯誤提示，填寫正確提示，分別用check,ok,err代替，這裏需要寫3個css，爲了以後好控制。

3.失去焦點進行驗證，不正確給提示語的div添加err的class屬性，並且修改div的html提示語，正確同理。參照下面showInfo()函數

4.對於驗證用戶名是否存在，可用ajax驗證，然後接到返回值保存在一個input的隱藏表單中，爲了點擊提交按鈕時再驗證，這樣就不用再一次通過ajax請求服務器了。

html代碼

<div class="upload">

	<div class="register">
    	<form name="myform" method="post" action="__APP__/garden_home/user/regToDB" οnsubmit="return submitCompanyReg();">
        <div class="upload_num1">
       		<div class="upload_title"><b>活動參與註冊頁面</b></div>
       		
        	<div class="formItem">
            
            	<label for="" class="fl formtitle">用 戶 名</label>
                
                <div class="fl name"><input id="user_name" class="user_name" name="user_name" type="text"></div>
              
              	<div id="username_msg" class="fl">5-25個字符，由中文(一個漢字爲兩個字符)、字母、數字組成</div>
              	
                <div class="clear"></div>
            
            </div>
            <div class="formItem">
            
            	<label for="" class="fl formtitle">密   碼</label>
                
                <div class="fl name"><input id="password" class="password" name="password" type="password"></div>
              	
              	<div  id="password_msg" class="fl"></div>
              	
                <div class="clear"></div>
            
            </div>
            <div class="formItem">
            
            	<label for="" class="fl formtitle">確認密碼</label>
                
                <div class="fl name"><input id="confirmpwd" class="confirmpwd" name="confirmpwd" type="password"></div>
              
              <div  id="confirmpwd_msg" class="fl"></div>
              
                <div class="clear"></div>
            
            </div>
        	
            
            <div class="formItem">
            
            	<label for="" class="fl formtitle">姓    名</label>
                
                <div class="fl name"><input id="realname" class="realname" name="realname" type="text"></div>
                
                <div id="realname_msg" class="fl "></div>
                
                <div class="clear"></div>
            
            </div>
            
            
            <div class="formItem">
            
            	<label for="" class="fl formtitle">性 別</label>
                
                <div class="fl selectsex"><select  name="sex" class="sex"><option value="0">男</option><option value="1">女</option></select></div>
                
                <div class="clear"></div>
            
            </div>
            
            <div class="formItem">
            
            	<label for="" class="fl formtitle">出生年月</label>
                
                <div class="fl name"><input id="birthdate" class="birthdate" name="birthdate" type="text"></div>
              
              <div  id="birthdate_msg" class="fl ">輸入格式:1900-01-01</div>
                <div class="clear"></div>
            
            </div>
            
            
            <div class="formItem">
            
            	<label for="" class="fl formtitle">聯繫電話</label>
                
                <div class="fl name"><input id="mobile" class="mobile" name="mobile" type="text"></div>
                
                <div id="mobile_msg" class="fl">輸入格式:13000000000</div>
                
                <div class="clear"></div>
            
            </div>
            
            
            <div class="formItem">
            
            	<label for="" class="fl formtitle">聯繫地址</label>
                
                <div class="fl address"><input id="address" class="address" name="address" type="text"></div>
                
                <div  id="address_msg" class="fl"></div>
                
                <div class="clear"></div>
            
            </div>
            
            
            <div class="formItem">
            
            	<label for="" class="fl formtitle">電子郵箱</label>
                
                <div class="fl name"><input id="email" class="email" name="email" type="text"></div>
                <div  id="email_msg" class="fl"></div>
                <div class="clear"></div>
            
            </div>
            <div class="formItem">
            
            	<label for="" class="fl formtitle">驗證碼</label>
                
                <div class="fl age"><input id="code" name="code" type="text"></div>
                <div class="fl security_code"><img id="verifyimg" src='__APP__/garden_home/user/verify/'  οnclick="fleshVerify()" /></div>
                <div  id="code_msg" class="fl"></div>
                <div class="clear"></div>
            
            </div>
            
        </div>
        <input type="hidden" id="is_username" name="is_username" value="0"/>
        <input type="hidden" id="is_code" value="0"/>
        <input type="hidden" id="is_email" value="0"/>
        <input type="hidden" id="is_birthdate" value="0"/>
        <input type="hidden" id="is_mobile" value="0"/>
      
        <div class="uplaod_button"><input name="register" value="註冊並激活卡號" type="submit"></div>
    	</form>
    </div>

jquery代碼

<script>

jQuery(function(){
	var mes="{$message}";    
    if(!!mes){
 	   alert(mes);
    } 
	
    /* ajax檢測，返回true表示成功，false失敗*/
	function quickAjax(opts){
		var settings = {
			async: false,
			type:"POST",
			dataType:"json",
			param : "",
			url:""
		  },
		  t;
		$.extend(settings,opts);
		$.ajax({
			async: settings.async,
			type:settings.type,
			url:settings.url,
			dataType:settings.dataType,
			data:settings.param,
			success:function(data){
				/* 檢測狀態碼：0沒錯誤:true，1有錯誤:false */
					t=data;
					/*if(data.status*1){
						t=false;
					};*/
			}
		});
		return t;

	}       
/* 顯示提示信息：
	o:對象；
	m:message信息;
	s:status 狀態；
*/
function showInfo(o,m,s){
var s=s||"";
switch (s){
	case "err":
		o.html(m).removeClass("ok check").show().addClass(s);
	break;	
	case "check":
		o.html(m).removeClass("err ok").show().addClass(s);
	break;
	case "ok":
		o.html(m).removeClass("err check").show().addClass(s);
	break;	
	default:
	o.html(m).removeClass("err check ok").show().addClass(s);
	break;
}
}
$("#user_name").blur(function(){
	var v=$("#user_name").val(),
	
	   len=v.replace(/[^\x00-\xff]/g, 'xx').length,
	   isName=/[^\u4e00-\u9fa50-9a-zA-Z]/ig.test(v),
	   isNum=/^\d+$/.test(v);
	var o=$("#user_name");
	if(!v){
		showInfo($("#username_msg"),'用戶名不能爲空','err');
		
		setTimeout(function(){o.focus()},0);	  
		
		return false;
	}else if(len<5||len>25){
		showInfo($("#username_msg"),'5-25個字符','err');
		setTimeout(function(){o.focus()},0);
		return false;
	}else if(isNum){
		showInfo($("#username_msg"),'用戶名不能以純數字組成','err');
		setTimeout(function(){o.focus()},0);
		return false;	
	}else if(isName){
		showInfo($("#username_msg"),'用戶名不能有特殊字符存在','err');
		setTimeout(function(){o.focus()},0);
		return false;	
	}
	/* ajax校驗： */
	var url="/user/register/checkuName/",
					param={"user_name":v};
					res=quickAjax({url:url,param:param}),
					st=res.status*1;
	if(st==0){
		$("#is_username").val("1");
		showInfo($("#username_msg"),'通過驗證','ok');
		
	}else{
		showInfo($("#username_msg"),'系統內已存在相同用戶名','err');
		setTimeout(function(){o.focus()},0);
		return false;
	}	
})
$("#confirmpwd").blur(function(){
	var v = $("#confirmpwd").val();
	var c = $("#password").val();
	var o = $("#password");
	if( v !== c){
		showInfo($("#confirmpwd_msg"),'兩次密碼不相同','err');
		setTimeout(function(){o.focus()},0);
		return false;
	}else{
		showInfo($("#confirmpwd_msg"),'正確','ok');
	}
	
})
$("#birthdate").blur(function(){
	var v = $("#birthdate").val();
	var o = $("#birthdate");
	
	isBirthdate= /^((?!0000)[0-9]{4}-((0[1-9]|1[0-2])-(0[1-9]|1[0-9]|2[0-8])|(0[13-9]|1[0-2])-(29|30)|(0[13578]|1[02])-31)|([0-9]{2}(0[48]|[2468][048]|[13579][26])|(0[48]|[2468][048]|[13579][26])00)-02-29)$/.test(v);
	if(isBirthdate == 0){
		showInfo($("#birthdate_msg"),'生日格式輸入錯誤,正確的格式:1900-01-01','err');
		//$("#birthdate_msg").html('<font color="red">生日格式輸入錯誤,正確的格式:1900-01-01</font>');
		setTimeout(function(){o.focus()},0);
		return false;
	}
	else{
		$("#is_birthdate").val("1");
		showInfo($("#birthdate_msg"),'通過驗證','ok');
		//$("#birthdate_msg").html('<font color="green">通過驗證</font>');
	}		
});
$("#mobile").blur(function(){
	var v = $("#mobile").val();
	var o = $("#mobile");
	isBirthdate= /^13[0-9]{9}|159[0-9]{8}$/.test(v);
	if(isBirthdate == 0){
		//$("#mobile_msg").html('<font color="red">手機號碼格式輸入錯誤,正確的格式:13000000000</font>');
		showInfo($("#mobile_msg"),'手機號碼格式輸入錯誤,正確的格式:13000000000','err');
		setTimeout(function(){o.focus()},0);
		return false;
	}
	else{
		$("#is_mobile").val("1");
		showInfo($("#mobile_msg"),'通過驗證','ok');
		//$("#mobile_msg").html('<font color="green">通過驗證</font>');
	}		
});
$("#email").blur(function(){
	var v = $("#email").val();
	var o = $("#email");
	isEmail=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(v);
	if(isEmail == 0){
		showInfo($("#email_msg"),'郵件地址格式輸入錯誤','err');
		setTimeout(function(){o.focus()},0);
		//$("#email_msg").html('<font color="red">郵件地址格式輸入錯誤</font>');
		return false;
	}
	/* ajax校驗： */
		var url="/user/register/checkEmail/",
			  param={"email":v},
			  res=quickAjax({url:url,param:param}),
			  st=res.status*1;
		if(st==0){
			$("#is_email").val("1");
			showInfo($("#email_msg"),'通過驗證','ok');
			//$("#email_msg").html('<font color="green">通過驗證</font>');
			
		}else{
			//$("#email_msg").html('<font color="red">郵件地址格式輸入錯誤</font>');
			showInfo($("#email_msg"),'郵件已經存在','err');
			setTimeout(function(){o.focus()},0);
			return false;
			
		}			
});


})

</script>
<script type="text/javascript">

	function submitCompanyReg()
	{
		if(document.getElementById('user_name').value == 0)
		{
			window.alert('用戶名不能爲空!');
			document.getElementById('username_msg').innerHTML = '<font color="red">用戶名不能爲空!</font>';
			document.getElementById('user_name').focus();
			return false;
		}

		if(document.getElementById('is_username').value == 0){
			window.alert('用戶名沒有通過驗證，不能註冊!');
			document.getElementById('user_name_msg').innerHTML = '<font color="red">請正確填寫用戶名後嘗試註冊！</font>';
			document.getElementById('user_name').focus();
			return false;
		}

		if(document.getElementById('password').value == 0)
		{
			window.alert('密碼不能爲空');
			document.getElementById('password_msg').innerHTML = '<font color="red">密碼不能爲空！</font>';
			document.getElementById('password').focus();
			return false;			
		}
		if(document.getElementById('confirmpwd').value == 0)
		{
			window.alert('確認密碼不能爲空');
			document.getElementById('password_msg').innerHTML = '<font color="red">確認密碼不能爲空！</font>';
			document.getElementById('confirmpwd').focus();
			return false;			
		}
		if(document.getElementById('password').value != document.getElementById('confirmpwd').value)
		{
			window.alert('二次輸入的密碼不一致，請重新輸入');
			document.getElementById('password_msg').innerHTML = '<font color="red">二次輸入的密碼不一致,請重新輸入！</font>';
			document.getElementById('password').focus();
			return false;
		}
	
		if(document.getElementById('realname').value == 0)
		{
			window.alert('真實姓名不能爲空!');
			document.getElementById('realname_msg').innerHTML = '<font color="red">真實姓名不能爲空！</font>';
			document.getElementById('realname').focus();
			return false;				
		}
		
		if(document.getElementById('birthdate').value == 0)
		{
			window.alert('出生日期不能爲空!');
			document.getElementById('birthdate').focus();
			document.getElementById('birthdate_msg').innerHTML = '<font color="red">出生日期不能爲空！</font>';			
			return false;				
		}

		if(document.getElementById('is_birthdate').value == 0){
			window.alert('生日格式輸入錯誤!');
			document.getElementById('birthdate_msg').innerHTML = '<font color="red">生日格式輸入錯誤！</font>';
			document.getElementById('birthdate').focus();
			return false;
		}		

		if(document.getElementById('address').value == 0)
		{
			window.alert('聯繫地址不能爲空!');
			document.getElementById('address').focus();
			document.getElementById('address_msg').innerHTML = '<font color="red">聯繫地址不能爲空</font>';				
			return false;				
		}


		if(document.getElementById('email').value == 0)
		{
			window.alert('電子郵件格式不正確!');
			document.getElementById('email_msg').innerHTML = '<font color="red">電子郵件格式不正確!</font>';
			document.getElementById('email').focus();
			return false;
		}

		if(document.getElementById('is_email').value == 0)
		{
			window.alert('電子郵件未通過系統驗證!');
			document.getElementById('email_msg').innerHTML = '<font color="red">電子郵件未通過系統驗證!</font>';
			document.getElementById('email').focus();
			return false;
		}		

		if(document.getElementById('mobile').value == 0)
		{
			window.alert('手機號碼不能爲空!');
			document.getElementById('mobile').focus();
			document.getElementById('mobile_msg').innerHTML = '<font color="red">手機號碼不能爲空</font>';							
			return false;				
		}						
		
		if(document.getElementById('is_mobile').value == 0){
			window.alert('手機號碼格式輸入錯誤!');
			document.getElementById('mobile_msg').innerHTML = '<font color="red">手機號碼格式輸入錯誤！</font>';
			document.getElementById('mobile').focus();
			return false;
		}	

		if(document.getElementById('code').value == 0)
		{
			window.alert('激活碼不能爲空!');
			document.getElementById('code').focus();
			return false;
		}

		if(document.getElementById('is_code').value == 0)
		{
			window.alert('驗證碼輸入錯誤!');
			document.getElementById('code').focus();
			return false;
		}		


		return true;
	}
</script>