jquery登录验证插件

        最近写了个登录验证的jquery插件，其中功能还不是很完善，需要进一步改进，先放出来看看先。

 

/**
 * 功能描述：本模块实现普通网站登录验证，以后可以添加二维码验证，以及第三方帐号登录验证
 * 关联脚本：md5.js,jquery.cookie.js,jquery.js
 * */
(function(window,$,undefined){
	$.extend({
		login : function(options){
			/*定义全局配置参数*/
			var defaults = {
				/*用户名id*/
				_userName	  : 'userName',
				/*密码id*/
				_pwd          : 'pwd',
				/*验证码id*/
				_checkCode	  : 'checkCode',
				/*错误信息id*/
				_errMsg       : 'errMsg',
				/*登录按钮id*/
				_btnSubmit	  : 'btnSubmit',
				/*密码长度*/
				_pwdLength    : 6,
				/*设定token保存的cookie有效期限，默认7天*/
				_expires	  : 7,
				/*是否启用浮动提示*/
				_useInputTip  :false
			};

			var settings = $.extend(defaults, options || {});
			
			var $form 		= $('form').eq(0);
			var $user 		= $('#'+ settings._userName);
			var $password 	= $('#'+ settings._pwd);
			var $checkCode	= $("#"+ settings._checkCode);
			var $mess_txt 	= $("#"+ settings._errMsg);
			var $mess 		= $mess_txt.parent();
			var $login 		= $('#'+ settings._btnSubmit);
			var md5 		= new MD5();
			
			/*定义enter按键提交表单验证事件*/
			var init = function (){
				var userName 	= $user.val();
				var pwd 		= $password.val();
				
				/*控制提示信息是否显示*/
				if($mess_txt.length > 0){
					$mess.css("display", $mess_txt.html().length > 0 ? "" : "none");
				}
				
				/*控件提示控制*/
				inputTip();
				
				/*给用户名控件绑定事件*/
				$user.each(function(){				
					/*若初始用户名为空，读取cookie中的用户名*/
					if(userName.length == 0){
						userName = getCookie("userName");
						
						if(userName.length > 0){
							$user.val(userName);
						}
					}
					
					if(settings._useInputTip){
						if(userName.length > 0 && pwd.length == 0){
							/*若用户名不为空，隐藏用户名控件提示*/			
							$user.prev().css("display","none");
						}
					}
					
					$(this).bind('keyup', function (evt) {				
						var et = evt || window.event;
						inputFocus( et );
					});			
				});
				
				/*给密码绑定事件*/
				$password.bind('keyup', function (evt) {
					var et = evt || window.event;
					inputFocus(et);
				});
				
				/*若存在验证码，则给验证码绑定事件*/
				if($checkCode.length > 0){
					$checkCode.bind('keyup', function (evt) {
						var et = evt || window.event;
						inputFocus(et);
					});
				}
				
				/*单击提交表单事件*/
				$login.bind('click', function() {
					if ($.trim($user.val()).length == 0){
						showMsgTip('请输入用户名！');
					}else if ($.trim($password.val()).length < settings._pwdLength){
						showMsgTip('密码不正确！');
					}else if($checkCode.length > 0 && $.trim($checkCode.val()).length == 0){
						showMsgTip('请输入验证码！');
					}else{				
						/*提交表单*/
						formSubmit();
				    }
				});				
			};
			
			/*实现消息提示*/
			var showMsgTip = function (msg){
				if($.trim(msg).length > 0){
					if($mess_txt.length > 0){
						$mess.show();
						$mess_txt.html(msg);	
					}else{
						alert(msg);
					}
				}
			};
			
			/*控件提示控制*/
			var inputTip = function (){
				/*控件提示控制*/
				$(":text, :password", $form).each(function(){
					var value = this.value;

					/*初始化是判断是否显示提示，若有内容不显示提示*/
					if(settings._useInputTip){
						$(this).prev().css("display", $.trim(this.value).length > 0 ? "none" : "");
					}
					
					$(this).on("focus", function(){
						if(settings._useInputTip){
							$(this).prev().css("display", "none");
						}
					}).on("blur", function(){
						if(settings._useInputTip){
							if (this.value == null || this.value.length < 1) {
								$(this).prev().css("display", "block");
							}
						}
					});
				});		
			};
			
			/*控件聚焦函数*/
			var inputFocus = function (et) {
				var keyCode = et.keyCode;
			
				if ( keyCode == 13){
					if ($.trim($user.val()).length == 0){
						$user.get(0).focus();
						$mess.show();
						showMsgTip('请输入用户名！');
					}else if ($.trim($password.val()).length < settings._pwdLength){
						$password.get(0).focus();
						showMsgTip('密码不正确！');
					}else if ($checkCode.length > 0 && $.trim($checkCode.val()).length == 0){
						$checkCode.get(0).focus();
						showMsgTip('请输入验证码！');
					}else{											
						/*提交表单*/
						formSubmit();
					}
				}
			};
			
			/*登录表单提交*/
			var formSubmit = function (){
				/*加密密码*/
				$password.val(md5.md5($password.val()));
				
				$mess.hide();			
				
				/*禁用提交按钮*/
				$login.attr("disabled", "disabled");
				
				/*提交表单*/
				$form.submit();
			};
			
			/*插件初始化*/
			init();
		}
	});
	
	/*信息写入cookie,默认存储7天*/
	var setCookie = function setCookie(key, value){
		if($(":checkbox").get(0).checked){
			$.cookie(key, value, {expires: _expires});
		}
	};
	
	/*读取cookie信息*/
	var getCookie = function (key){
		var cookieValue = $.cookie(key);		
		return cookieValue == undefined ? "" : cookieValue;
	};	
})(window,jQuery);

      调用方法：

 

 

	/*实现登录验证*/
	$.login();

 

 

转载于:https://www.cnblogs.com/wala-wo/p/5119193.html