论坛首页 → AJAX版 → YUI →

使用YUI使用的用户注册验证~

 
浏览 405 次
主题：使用YUI使用的用户注册验证~
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • ecsun
  • 等级: 二星会员
  • 用户头像
  • 性别:
  • 文章: 216
  • 积分: 205
最后更新时间：2008-07-26
引用
由于前期使用的Ext,在性能上问题比较明显,所以最近转YUI和JQuery,拿YUI做了一个用户注册校验的小测试,感觉还可以,贴上来与大伙分享. 


<%@ include file="/components/core/taglib.jsp"%>

<link rel="stylesheet" type="text/css"
	href="<c:url value="/scripts/lib/yui/build/fonts/fonts-min.css"/>" />
<script type="text/javascript"
	src="<c:url value="/scripts/lib/yui/build/yahoo-dom-event/yahoo-dom-event.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/scripts/lib/yui/build/dom/dom-mini.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/scripts/lib/yui/build/animation/animation.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/scripts/lib/yui/build/yahoo/yahoo.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/scripts/lib/yui/build/event/event.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/scripts/lib/yui/build/connection/connection.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/scripts/lib/yui/build/json/json-min.js"/>"></script>
<style type="text/css">
#message {
	background: #FFFFFF;
	margin-bottom: 1px;
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 2px;
	padding-left: 5px;
	padding-top: 2px;
	font-size: 13px;
	height: 25px;
	autoWidth: true;
	border: 1px solid #887EBE;
}
</style>
<div class="basic-common-container">
	<div class="default-mini-container-title">
		<s:text name="faceye.security.user.register"></s:text>
	</div>
	<div class="default-mini-container-content">
		<div id="message">

		</div>
		<script type="text/javascript">
(function() {
	function suggest(){
       var attributes = {
        color: { to: '#FFFFFF' },
        backgroundColor: { to: '#FF4500' }
      };
	  //backgroundColor: { to: '#e06' }
	  //#FF4500
      var anim = new YAHOO.util.ColorAnim('message', attributes);
	  var message=YAHOO.util.Dom.get('message');
	  //messageDoc.text='Message text';
      //message.appendChild(messageDoc);
	  YAHOO.util.Dom.insertAfter('div',message);
	  //message.createChildren('span','tt');
	  message.innerHTML='<span id="suggest-message"><s:text name="faceye.security.register.recommend" /></span><br/>';
      anim.animate();
	 };
/**
*  load suggest message win documnet ready
*/
  YAHOO.util.Event.on(window, 'load', function(e) {
	 suggest();
	});
/**
* change background color when error accous
*/
  function errorMessageBackgroundColor(){
         var errorAttributes= {
            color: { to: '#FFFFFF' },
            backgroundColor: { to: '#e06' }
          };
	      var errorAnim=new YAHOO.util.ColorAnim('message', errorAttributes);
		  errorAnim.animate();
  };
//user name validator;
///^(([a-zA-Z0-9]|[_-]){4,20}|[\u4e00-\u9fa5]{2,10})+$/
//^[0-9a-zA-Z\u4e00-\u9fa5]+$
///^\s*[.A-Za-z0-9_-]{4,20}\s*$/
//^[0-9a-zA-Z\u4e00-\u9fa5]+$
//email:/^([-_A-Za-z0-9\.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/
   function validatorUserName(){
     var filter=/^[0-9a-zA-Z\u4e00-\u9fa5]+$/;
     var emailFilter=/^([-_A-Za-z0-9\.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
	 var username=YAHOO.util.Dom.get('entity.username').value;
	 var match=filter.test(username);
	 if(match){
	   if(username.length<2 || username.length >20){
	     match=false;
	   }
	 }else{
	   match=emailFilter.test(username);
	   if(match){
	     YAHOO.util.Dom.get('entity.email').value=username;
	     YAHOO.util.Dom.get('entity.email').readOnly=true;
	     isEmailAvailiable();
	   }
	 }
	 if(match){
	  isUserNameAvailiable();
	 }
	 return match;
   };
   
//is user name be used?
   function isUserNameAvailiable(){
       var username=YAHOO.util.Dom.get('entity.username').value;
	   var callback={
		   success:function(o){
			   var result=YAHOO.lang.JSON.parse(o.responseText);
			   var message=YAHOO.util.Dom.get('message');
			   if(result.exist==='no'){
			   errorMessageBackgroundColor();
			     if(!YAHOO.util.Dom.get('error-server-side-username')){
			     message.innerHTML+='<span id="error-server-side-username"><s:text name="faceye.security.user.username"/><strong><font color="yellow">'+username+'</font></strong></span><s:text name="faceye.validator.security.user.username.exist"/><br/>';
			     }
			   }else{
			     message.innerHTML+='<span><s:text name="faceye.security.user.username"/><strong><font color="yellow">'+username+'</font></strong></span><s:text name="faceye.validator.security.user.username.could.use"/><br/>';
			   }
		   },
		   failure:function(o){
		   }
	   };
	   var req=YAHOO.util.Connect.asyncRequest('POST', base.path+'security/isUserNameAvailable.do', callback,'username='+username);
   }
   
   //is email be used?
     function isEmailAvailiable(){
       var email=YAHOO.util.Dom.get('entity.email').value;
	   var callback={
		   success:function(o){
			   var result=YAHOO.lang.JSON.parse(o.responseText);
			   var message=YAHOO.util.Dom.get('message');
			   if(result.exist==='no'){
			   errorMessageBackgroundColor();
			    if(!YAHOO.util.Dom.get('error-server-side-email')){
			     message.innerHTML+='<span id="error-server-side-email"><s:text name="faceye.security.user.email"/><strong><font color="yellow">'+email+'</font></strong></span><s:text name="faceye.validator.security.user.email.exist"/><br/>';
			    }
			   }else{
			     message.innerHTML+='<span><s:text name="faceye.security.user.email"/><strong><font color="yellow">'+email+'</font></strong></span><s:text name="faceye.validator.security.user.username.could.use"/><br/>';
			   }
		   },
		   failure:function(o){
		   }
	   };
	   var req=YAHOO.util.Connect.asyncRequest('POST', base.path+'security/isEmailAvailable.do', callback,'email='+email);
   }

 //passowrd validator;
 function validatorPassword(){
      var filter=/^s*[A-Za-z0-9]{4,20}s*$/;
	  var password=YAHOO.util.Dom.get('entity.password').value;
	  var match=filter.test(password);
	  return match;
 };
 //repassword validator
 function validatorRePassword(){
     var filter=/^s*[A-Za-z0-9]{4,20}s*$/;
	 var password=YAHOO.util.Dom.get('entity.repassword').value;
	 var match=filter.test(password);
	 return match;
 };
 //is two times password same?
 function isPasswordSame(){
       var password=YAHOO.util.Dom.get('entity.password').value;
	   var repassword=YAHOO.util.Dom.get('entity.repassword').value;
	   if(password!=repassword){
		   return false;
	   }else{
		   return true;
	   }
 }
 //email validator;
 function validatorEmail(){
   var filter=/^([-_A-Za-z0-9\.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
   var email=YAHOO.util.Dom.get('entity.email').value;
   var match=filter.test(email);
   if(match){
    isEmailAvailiable();
   }
   return match;
 }
//when error accous
	
	YAHOO.util.Event.on('entity.username','blur',function(e){
		var validatorResult=validatorUserName();
		if(!validatorResult){
           errorMessageBackgroundColor();
		  //var usernameDom=YAHOO.util.Dom.get('message');
		  var errorMessage=YAHOO.util.Dom.get('message');
		  //var errorMessageText=document.createTextNode('<s:text name="faceye.validator.security.user.username.message"/>');
		  //errorMessage.appendChild(errorMessageText);
		 // alert(span.value);
		 //YAHOO.util.Dom.insertAfter({errorMessage,usernameDom);
		 // YAHOO.util.Dom.insertAfter('<span id="error-span"><s:text name="faceye.validator.security.user.username.message"/></span>',YAHOO.util.Dom.get('suggest-message'));
		  errorMessage.innerHTML='<span id="error-span"><s:text name="faceye.validator.security.user.username.message"/></span><br/>';
	    }else{
            suggest();
		}
	});
	

    YAHOO.util.Event.on('entity.password','blur',function(e){
          var v=validatorPassword();
		  if(!v){
              errorMessageBackgroundColor();
		      var errorMessage=YAHOO.util.Dom.get('message');
		      errorMessage.innerHTML='<span id="error-span"><s:text name="faceye.validator.security.user.password.message"/></span><br/>';
		  }else{
			  suggest();
		  }
	});
   
    YAHOO.util.Event.on('entity.repassword','blur',function(e){
        var v=validatorRePassword();
		  if(!v){
		      errorMessageBackgroundColor();
		      var errorMessage=YAHOO.util.Dom.get('message');
		      errorMessage.innerHTML='<span id="error-span"><s:text name="faceye.validator.security.user.repassword.message"/></span><br/>';
		  }else{
			  v=isPasswordSame();
			  if(!v){
                  errorMessageBackgroundColor();
		          var errorMessage=YAHOO.util.Dom.get('message');
		          errorMessage.innerHTML='<span id="error-span"><s:text name="faceye.validator.security.user.password.notsame"/></span><br/>';
			  }else{
			   suggest();
			  }
		  }
	});

	YAHOO.util.Event.on('entity.email','blur',function(e){
          var v=validatorEmail();
		  if(!v){
		      errorMessageBackgroundColor()
		      var errorMessage=YAHOO.util.Dom.get('message');
		      errorMessage.innerHTML='<span id="error-span"><s:text name="faceye.validator.security.user.email"/></span><br/>';
		  }else{
			  suggest();
		  }
	});
   YAHOO.util.Event.on('form','submit',function(e){
	      var html='';
		  if(!validatorUserName()){
              html+='<span id="error-span"><s:text name="faceye.validator.security.user.username.message"/></span><br/>';
		  }
          if(!validatorPassword()){
              html+='<span id="error-span"><s:text name="faceye.validator.security.user.password.message"/></span><br/>';
		  }
          if(!isPasswordSame()){
              html+='<span id="error-span"><s:text name="faceye.validator.security.user.repassword.message"/></span><br/>';
		  }
		  if(!validatorEmail()){
              html+='<span id="error-span"><s:text name="faceye.validator.security.user.email"/></span><br/>';
		  }
	      if(html!=''){
             var error=YAHOO.util.Dom.get('message');
			 error.innerHTML=html;
			 var errorAttributes= {
               color: { to: '#FFFFFF' },
               backgroundColor: { to: '#e06' }
               };
	          var errorAnim=new YAHOO.util.ColorAnim('message', errorAttributes);
			  errorAnim.animate();
			  return false;
		  }else{
           //YAHOO.util.Dom.get('form').submit();
           var username=YAHOO.util.Dom.get('entity.username').value;
           var email=YAHOO.util.Dom.get('entity.email').value;
	       var callback={
		   success:function(o){
			   var result=YAHOO.lang.JSON.parse(o.responseText);
			   if(result.username==='yes' && result.email==='yes'){
			     YAHOO.util.Dom.get('form').submit();
			   }else{
                 var message=YAHOO.util.Dom.get('message');
			     if(result.username==='no'){
			      errorMessageBackgroundColor();
			      if(!YAHOO.util.Dom.get('error-server-side-username')){
			       message.innerHTML+='<span><s:text name="faceye.security.user.username"/><strong><font color="yellow">'+username+'</font></strong></span><s:text name="faceye.validator.security.user.username.exist"/><br/>';
			       }
			     }
			     if(result.email==='no'){
			      errorMessageBackgroundColor();
			      if(!YAHOO.util.Dom.get('error-server-side-email')){
			       message.innerHTML+='<span id="error-server-side-email"><s:text name="faceye.security.user.email"/><strong><font color="yellow">'+email+'</font></strong></span><s:text name="faceye.validator.security.user.email.exist"/><br/>';
			      }
			     }
			   }
		   },
		    failure:function(o){
		   }
	     };
	     var req=YAHOO.util.Connect.asyncRequest('POST', base.path+'security/isUserNameAndEmailAvailable.do', callback,'username='+username+'&email='+email);
	     return false;
	  }
   });
   
})();
</script>
		<s:form action="saveUser.do" theme="simple" namespace="/security"
			method="post" id="form">
			<table>
				<tr>
					<td>
						<s:text name="faceye.security.user.username" /><s:text name="faceye.global.redStare"/>
					</td>
					<td>
						<s:textfield name="entity.username" id="entity.username"
							required="true" size="40" />
						<s:text name="faceye.validator.security.user.username" />
					</td>
				</tr>
				<tr>
					<td>
						<s:text name="faceye.security.user.password" /><s:text name="faceye.global.redStare"/>
					</td>
					<td>
						<s:password name="entity.password" id="entity.password"
							required="true" size="40" />
						<s:text name="faceye.validator.security.user.password" />
					</td>
				</tr>
				<tr>
					<td>
						<s:text name="faceye.security.user.repassword" /><s:text name="faceye.global.redStare"/>
					</td>
					<td>
						<s:password name="entity.repassword" id="entity.repassword"
							required="true" size="40" />
					</td>
				</tr>
				<tr>
					<td>
						<s:text name="faceye.security.user.email" /><s:text name="faceye.global.redStare"/>
					</td>
					<td>
						<s:textfield name="entity.email" id="entity.email" required="true"
							size="40" />
						<s:text name="faceye.validator.security.user.email" />
					</td>
				</tr>
				<tr>
					<td>
						<a href="#"><s:text name="faceye.security.regiser.command" />
						</a>
					</td>
					<td>
						<s:submit value="%{getText('faceye.security.register.agree')}"
							align="center" id="user-register-form-submit" />
					</td>
				</tr>
			</table>
		</s:form>

	</div>
</div>


运行效果~图:
  • F3427e7a-94f1-31a2-954d-66e570c55cc2-thumb
  • 描述:
  • 大小: 123.4 KB
返回顶楼
   
  • 王 三
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 21
  • 积分: 0
  • 来自: 北京
最后更新时间：2008-07-26
引用
yahoo-event-dom.js已经包括了dom-min.js event-min.js了
返回顶楼
   
0 请登录后投票
 
论坛首页 → AJAX版 → YUI

跳转论坛:
JavaEye推荐