zoukankan      html  css  js  c++  java
  • 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();




  • 相关阅读:
    NS3笔录
    网络性能指标的几个定义
    获取Emum类型值的数量
    Container类型元素累加
    ax用代码调用静态查询
    FormRun类的方法detach()作用
    Num2Str函数使用介绍
    查询生产单PO的位置
    AX使用临时表作为数据源
    Date2Str函数使用介绍
  • 原文地址:https://www.cnblogs.com/wala-wo/p/5119193.html
Copyright © 2011-2022 走看看