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