最近写了个登录验证的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. 浅谈 HTML5 的 DOM Storage 机制 (转)

    在开发 Web 应用时,开发者有时需要在本地存储数据.当前浏览器支持 cookie 存储,但其大小有 4KB 的限制.这对于一些 Ajax 应用来说是不够的.更多的存储空间需要浏览器本身或是插件的支持 ...

  2. c++/c字符串操作汇集

    1. 字符串替换 void string_replace(std::string &strBig, const std::string &strsrc, const std::stri ...

  3. Unity3D Mathf函数

    Mathf.Abs绝对值 计算并返回指定参数 f 绝对值. Mathf.Acos反余弦 static function Acos (f : float) : float 以弧度为单位计算并返回参数 f ...

  4. 韦东山yy公开课笔记(2)--汇编,段,栈,重定位/链接地址,位置无关吗

    1. 要不要学习汇编 可以只懂一点,工作中基本不用,一旦用就是出了大问题 ldr : load 读内存 ldr r0, [r1]  : r1里存放的是地址值, 去这个地址读取4字节的内容,存入r0 s ...

  5. bss 概念

    BSS段 在采用段式内存管理的架构中,BSS段(bss segment)通常是指用来存放程序中未初始化的全局变量的一块内存区域.BSS是英文Block Started by Symbol的简称.BSS ...

  6. MYSQL存储过程中的IN、OUT和INOUT

    MYSQL存储过程中的IN.OUT和INOUT,不能简单理解为一个方法的参数和返回值,而是面向整个过程上下文变量的. 一.MySQL 存储过程参数(in) 基本可以理解为传入function的参数,而 ...

  7. 【Java基础】继承的一些总结

    什么是继承 把一些类的具有共性的东西剥离出来形成一个新的类,然后各个其他类保留自己独有的特性,并用关键字extends继承这个剥离出来的新的类,可以最终达到各类原始相同效果,但是在每个类中,单用一个“ ...

  8. POJ2192 - Zipper(区间DP)

    题目大意 给定三个字符串s1,s2,s3,判断由s1和s2的字符能否组成字符串s3,并且要求组合后的字符串必须是s1,s2中原来的顺序. 题解 用dp[i][j]表示s1的前i个字符和s2的前j个字符 ...

  9. Video Surveillance - POJ 1474(判断是否存在内核)

    题目大意:询问是否在家里装一个监视器就可以监控所有的角落. 分析:赤裸裸的判断多边形内核题目. 代码如下: #include<iostream> #include<string.h& ...

  10. ZOJ 1914 Arctic Network (POJ 2349) MST

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1914 http://poj.org/problem?id=2349 题目大 ...