一个登录 的例子

一个登录的例子

jq，

验证码自动刷新

点击图片验证码刷新

判断localStorage

默认回车登录

添加交互样式

<div class="img-captcha-wrap" onselectstart="return false;" style="-moz-user-select:none;">
     <img src="json/code.jsp" οnclick="this.src='json/code.jsp?rand=' + Math.random();$('#captcha').val('');">
</div> 

    $(function(){

    	//加载时自动刷新
    	function refesh(){
    		$('.codeImg img').attr('src', 'json/code.jsp?rand=' + Math.random());
    	};
    	refesh();
    	
    	var user= localStorage.getItem(username);
    	if(user){

    		$('#remberUsername').attr('checked',true);//checkbox
    		$("#username").val(user);
    		
    	}
    	//
    	var empty = function(obj,msg){
    		if(!obj){
    		// 用户名不能为空
    		parent.layer.msg(msg,{time:1500});
    			return false;

    		};
    		return true;
    	}
    	//默认回车登录
    	$("body").bind('keyup',function(event) {  
    	    if(event.keyCode==13){  
    	    	$("#signIn").click();//trigger() 方法触发被选元素上指定的事件以及事件的默认行为 
    	    }     
    	}); 
    	
   
	
    	 $("#signIn").click(function(){
    		 var signIn={
    				 username:$("#username").val(),
    				 md5password:$("#md5password").val(),
    				 code: $('#captcha').val()	 
    		 };
    		
    		if(!empty(signIn.username,"用户名不能为空")){
    			return;

    		}
    	    if(!empty(signIn.md5password,"密码不能为空")){
    	    	return;
    	    };
    	    if(!empty(signIn.code,"图形验证码不能为空")){
    	    	return;
    	    };
    		 
    	    $(this).attr('disabled',true);//失效
    	    
            $("body").off('keydown');
    		 var parameter = signIn;
    		 parameter.GID ="partner.logon";
    		 $.ajax({
    	    		type : 'POST',
    	    		url : sWebRootPath + "/WebService",
    	    		dataType : 'json',
    	    		data : JSON.stringify(parameter),
    	    		success : function(data){
    	    			
    	    			// console.log(data);
    	    			if (data.issuccess) {
    	    				//登录表单右侧移动消失
    	    				$(".lonon-content").addClass("bounceOutRight");
    	    				//弹出成功信息
    	    				parent.layer.msg("登录成功",{time:900});
    	    				//跳转index页面
    	    				setTimeout(function(){
    	    					location.href=sWebRootPath;
    	    				}, 1500);
    	    			} else {
    	    				//弹出错误信息
    	    				// console.log(data);
    	    				parent.layer.msg(data.rtnmessage,{time:1500});
    	    				refesh();
    	    			}
    	    		},
    	    		error: function(data){
    	    			//弹出错误信息
    	    			// console.log(data);//{readyState: 4, responseText: "图形验证码不正确", status: 200, statusText: "OK"}
    					parent.layer.msg(data.responseText,{time:1500});
    					$(this).attr('disabled',false);
    	    		}
    	    	});
    		 
    	
   
    	 });
    	 
    	 //添加样式交互
    	    $(".formInput input").focusin(function(){
    	    	var $this = $(this);
    	    	$this.parents(".formList").addClass("formListActive");
    	    	
    			$(document).keyup(function(){
    				if($this.val()!=""){
    					$this.parents(".formList").find(".km-icon").show();
    				}else{
    					$this.parents(".formList").find(".km-icon").hide();
    				}
    			})
    		});
    	    
    	    $(".km-icon-del").click(function(){
    	    	$(this).parents(".formList").find("input").val("");
    	    	$(this).hide();
    	    });
    		$(".formInput input").focusout(function(){
    			$(this).parents(".formList").removeClass("formListActive")
    		})
    	
    	
    	
    	
    });