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();
jquery登录验证插件的更多相关文章
- jQuery身份证验证插件
jQuery身份证验证插件 /*! * jQuery isIDCard Plugin v1.0.0 * http://www.cnblogs.com/cssfirefly/p/5629561.html ...
- jquery数据验证插件
jquery数据验证插件(自制,简单,练手) 一:最近项目中js数据验证比较多,为了统一风格,移植复用,于是顺手封装了Jquery的插件. (function($) { var defaults ...
- 【转载】jquery validate验证插件,在ajax提交方式下的验证
正常的表单都是使用submit按钮来提交,jquery validate插件可以方便的做表单验证. 做一个发送短信的功能,向目标表插入多条记录,界面采用ajax来提交表单,等待效果直接用ext的遮罩 ...
- jquery客户端验证插件
http://www.cnblogs.com/masing/articles/2157420.html http://www.oschina.net/p/jquery+formvalidator ht ...
- jquery数据验证插件(自制,简单,练手)
一:最近项目中js数据验证比较多,为了统一风格,移植复用,于是顺手封装了Jquery的插件. (function($) { var defaults = { bugColor: '#FFCCCC', ...
- 【JQ成长笔记】jQuery Validate验证插件
validate是一款很好的jq插件,提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同 ...
- jquery validate验证插件扩展方法(转)
/***************************************************************** jQuery Validate扩展验证方法 (linjq) *** ...
- JQuery Validate验证插件自定义验证消息
// 自定义验证的方法,验证通过返回true,否则返回false(会显示错误消息) jQuery.validator.addMethod; // 定义验证的消息 jQuery.validator.fo ...
- jquery validate 验证插件 解决多个相同的Name 只验证第一个的方案
方案一:如果 项目里不是只是个别页面 有多个name 验证, 那么利用 prototype 来写,把这段代码加在你所要使用多个name的页面 的js初始化里 即可 if ($.validator) ...
随机推荐
- BZOJ2843: 极地旅行社
2843: 极地旅行社 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 90 Solved: 56[Submit][Status] Descripti ...
- html5 svg 第八章 文字text
虽然它可能是真实的,每一个画面讲述了一个故事,这是完全正确的,用言语来帮助讲故事.因此,SVG有几个元素,让你将文本添加到您的图形. 文本术语 Text Terminology 在我们调查的主要方法添 ...
- SDWebImage源码解读之SDWebImageDownloader
SDWebImage源码解读之SDWebImageDownloader 第八篇 前言 SDWebImageDownloader这个类非常简单,作者的设计思路也很清晰,但是我想在这说点题外话. 如果有人 ...
- [洛谷2397]yyy loves Maths VI
题目背景 自动上次redbag用加法好好的刁难过了yyy同学以后,yyy十分愤怒.他还击给了redbag一题,但是这题他惊讶的发现自己居然也不会,所以只好找你 题目描述 他让redbag找众数他还特意 ...
- IIS7 性能(内存、CPU、当前请求耗时)监测
程序上线了,但运行过程中如果发现很CPU.内存异常,某些操作耗时,如何在生产环境中监测并查明原因呢,有以下几种工具(方式): 1.NProfiler,这是一个商业软件,有试用周期,可以监测包括Winf ...
- 排列的学习(java)
1.无重复排列 2.有重复排列 3,下一个排列 package 生成排列; public class Main { static int count=0; //a中保存原来的排列,lev表示选定第几个 ...
- 运算符优先级 (Transact-SQL)
当一个复杂的表达式有多个运算符时,运算符优先级决定执行运算的先后次序. 执行的顺序可能严重地影响所得到的值. 运算符的优先级别如下表中所示. 在较低级别的运算符之前先对较高级别的运算符进行求值.
- 教程-FastReport 的安装 心得
由于要使用报表,所以下载了FastReport 4.7.91,由于是第一次安装和使用FastReport报表,所以在安装的时候走了点弯路.把心得写一下吧. 我是第安装第二遍才完全理解安装过程,也可以定 ...
- 问题-Delphi记忆工程打开的单元(XE2设置项)
问题情况:每次在delphi中打开了N个单元的窗口,关闭delphi后,第二天还得一个一个打开单元窗口.问题原因:这是因为delphi的记忆功能未打开.问题处理:Tools->Options.. ...
- JavaScript- The Good Parts Chapter 3 Objects
Upon a homely object Love can wink.—William Shakespeare, The Two Gentlemen of Verona The simple type ...