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

jquery登录验证插件的更多相关文章

  1. jQuery身份证验证插件

    jQuery身份证验证插件 /*! * jQuery isIDCard Plugin v1.0.0 * http://www.cnblogs.com/cssfirefly/p/5629561.html ...

  2. jquery数据验证插件

    jquery数据验证插件(自制,简单,练手)   一:最近项目中js数据验证比较多,为了统一风格,移植复用,于是顺手封装了Jquery的插件. (function($) { var defaults ...

  3. 【转载】jquery validate验证插件,在ajax提交方式下的验证

    正常的表单都是使用submit按钮来提交,jquery  validate插件可以方便的做表单验证. 做一个发送短信的功能,向目标表插入多条记录,界面采用ajax来提交表单,等待效果直接用ext的遮罩 ...

  4. jquery客户端验证插件

    http://www.cnblogs.com/masing/articles/2157420.html http://www.oschina.net/p/jquery+formvalidator ht ...

  5. jquery数据验证插件(自制,简单,练手)

    一:最近项目中js数据验证比较多,为了统一风格,移植复用,于是顺手封装了Jquery的插件. (function($) { var defaults = { bugColor: '#FFCCCC', ...

  6. 【JQ成长笔记】jQuery Validate验证插件

    validate是一款很好的jq插件,提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同 ...

  7. jquery validate验证插件扩展方法(转)

    /***************************************************************** jQuery Validate扩展验证方法 (linjq) *** ...

  8. JQuery Validate验证插件自定义验证消息

    // 自定义验证的方法,验证通过返回true,否则返回false(会显示错误消息) jQuery.validator.addMethod; // 定义验证的消息 jQuery.validator.fo ...

  9. jquery validate 验证插件 解决多个相同的Name 只验证第一个的方案

    方案一:如果 项目里不是只是个别页面 有多个name 验证, 那么利用 prototype 来写,把这段代码加在你所要使用多个name的页面  的js初始化里 即可 if ($.validator) ...

随机推荐

  1. Maprduce重写参考

    Maprduce数据流走向图:   流程解释    Input files        功能描述:存储在HDFS中的文件数据        InputFormat            功能描述:1 ...

  2. 基于.NET平台的分布式应用程序的研究

    摘 要:.NET框架是Microsoft用于生成分布式Web应用程序和Web服务的下一代平台.概述了用于生成分布式应用程序的.NET框架的基本原理.重点讲述了.NET框架的基础:公共语言运行时(CLR ...

  3. javascript点击图片放大的功能(原生)

    使用的图片: 1.jpg <!doctype html> <html lang="en"> <head> <meta charset=&q ...

  4. 微支付开发(.net)

    最近一周多进行微支付开发工作,总结一下关于微支付开发中遇到的问题. 如写得不对请大家提出,第一次自己写文章.嘿嘿... 1.申请微支付,登陆公众平台后(公众号为服务号并已认证),进入“服务”-“服务中 ...

  5. SPOJ VLATTICE Visible Lattice Points 莫比乌斯反演

    这样的点分成三类 1 不含0,要求三个数的最大公约数为1 2 含一个0,两个非零数互质 3 含两个0,这样的数只有三个,可以讨论 针对 1情况 定义f[n]为所有满足三个数最大公约数为n的三元组数量 ...

  6. javascript二维数组

    var a= new Array(new Array(1,2),new Array('b','c')); document.write(a[1][1]); 说白了,就是利用for循环定义二维数组! & ...

  7. Java笔记(三)……基础语法

    关键字 标识符 在程序中自定义的一些名称 由26个英文字母大小写,数字:0-9,符号:_ $组成 定义合法标识符规则: 数字不可以开头. 不可以使用关键字. Java中严格区分大小写. 注意:在起名字 ...

  8. node系列1

    NodeJS基础 JS是脚本语言,脚本语言都需要一个解析器才能运行,NodeJS就是一个解析器.nodejs.org 打开终端,键入node进入命令交互模式,可以输入一条代码语句后立即执行并显示结果 ...

  9. JAVA面试题——JAVA编程题1(2015.07.22——湛耀)

    实现代码很简单:   package com.xiaozan.shopping;   import java.util.Arrays;   public class ShoppingCart {    ...

  10. 【原创】MapReduce计数器

    MapReduce框架内置了一些计数器的支持,当然,我们也可以设置自己的计数器用来满足一些特殊的要求. 其实计数器可以用来完成很多事,关键要看你如何用,例如你想知道map输入数据的指定记录特定的信息有 ...