注册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>