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) ...
随机推荐
- Java通过socket实现smtp协议发送邮件
import java.io.BufferedReader;import java.io.DataOutputStream;import java.io.IOException;import java ...
- mac book air 装win7
1. 使用mac book air A1465中 bootCamp制作启动U盘: 需要U盘一个8G,windows 7 原版镜像ISO安装文件一个,根据bootcamp操作提示选择文件及U盘, 注意U ...
- CodeForces 368B Sereja and Suffixes
题意:给你一个序列,问你从l位置到结尾有多少个不同的数字. 水题,设dp[i]表示从i位置到结尾不同数字的个数,那么dp[i] = dp[i+1] + (vis[a[i]] == 0),在O(n)时间 ...
- [BILL WEI]一些经常用到的SQL函数
截取时间 --convert可以截取特点值 convert(varchar(10),getdate(),120) 截取2012-11-11 11:11:11 前10位,得到日期2012-11-11
- 【HTML】Advanced3:Tables: Columns, Headers, and Footers
1. <table> <colgroup> <col> <col class="alternative"> <col> ...
- Java 并发之线程安全
写线程安全的代码,说白了就是管理一个类的共享的.可变的状态.只要有多于 1 个线程对类的状态进行写入,那么就必须用同步来协调这多个线程对状态的访问.对于一个没有状态的类来说(简单的理解就是只有方法没有 ...
- Does not contain a valid host;port authority解决方法
ERRORorg.apache.hadoop.hdfs.server.namenode.NameNode: java.lang.IllegalArgumentException: Does not c ...
- HW2.12
控制台: import java.util.Scanner; public class Solution { public static void main(String[] args) { Scan ...
- 路由器中pppoe,动态IP,静态IP的区别
路由器中pppoe,动态IP,静态IP的区别 要把路由器设置得能上网,无非就是设置WAN外网接口连接而已.WAN接口能上网,则连接的电脑就能上网,反之则上不了网.只不过WAN接口往往有pppoe,动态 ...
- CF29D - Ant on the Tree(DFS)
题目大意 给定一棵树,要求你按给定的叶子节点顺序对整棵树进行遍历,并且恰好经过2*n-1个点,输出任意一条符合要求的路径 题解 每次从叶子节点开始遍历到上一个叶子节点就OK了, 这个就是符合要求的路径 ...