最近写了个登录验证的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();