1. 程式人生 > >jquery實現登入驗證

jquery實現登入驗證

 仿著例子  可以實現登入  驗證

 直接上程式碼

<script type="text/javascript">
		//<![CDATA[
		$(function(){
		         //文字框失去焦點後
		        $('form :input').blur(function(){
		             var $parent = $(this).parent();
		             $parent.find(".formtips").remove();
		             //驗證使用者名稱是否為空
		             if( $(this).is('#userId') ){ 
		             g
		             
		                    if( this.value=="" || this.value.length >16 ){
		                        var errorMsg = '不能為空';
		                        $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
		                    }
		             }
					 //驗證密碼是否為空
		             if( $(this).is('#pwd') ){   
		                    if( this.value=="" ){
		                        var errorMsg = '不能為空';
		                        $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
		                    }
		             }
		        }).keyup(function(){ 
		           $(this).triggerHandler("blur");
		        }).focus(function(){
		             $(this).triggerHandler("blur");
		        });//end blur
		        //提交,最終驗證。
		         $('#login').click(function(){
		                $("form :input.required").trigger('blur');
		                var numError = $('form .onError').length;
		                if(numError){
		                    return false;
		                } 
				 });
		
		})
		//]]>
</script>

<form method="post" action="<%=basePath %>LoginServlet"  id="loginForm">
                	<h3>如有帳號,請登入</h3>
                	<input type="hidden" name="apply"  value="1"/> 
    				<div class="input-text"><label><p>帳號:</p><input type="text" name="userId"  id="userId" maxlenth="15" class="required one1" placeholder="請輸入帳號,支援中文/英文" ></label></div>
    				<div  class="input-text"><label><p>密碼:</p><input type="password"  name="pwd"  id="pwd" class="required one2" placeholder="請輸入密碼" ></label></div>
    				<div class="input-btn"><input type="submit" value="登入" class="login-btn" id="login"><span><a href="http://www.lingdi888.com/getpwd.jsp">忘記密碼?</a></span></div>
    			</form>