jQuery validata插件实现（每周一插件系列）

大家好，第一次写有点正规的博客，以前都是随手复制几下。为了打LOL,我写快点，代码我都复制在最下面了，并且写了大量的注释。

首先我写jquery插件，喜欢这么写（好处有很多，以后在讲，哈哈，看过jQuery源码应该知道）：　　

(function(root,factory,plug,undefined){

　　factory(root.jQuery,plug)

})(window,function($,plug){

　　/*

　　在这里写逻辑

　　一：默认的参数 var __dEFAULTS__，

　　二：规则（可根据业务需求自己配置） var __RULES__，

　　三：原型 var __PROTOTYPE__，

　　　　_init: 初始化DOM结构，没什么将的,

　　　　_attachEvent: 自定义的事件的机制（其实就是用了jquery的trigger）

　　　　_bind: 首先是事件功能的绑定，为每一个input都绑定事件,each循环__RULES__（就是规则），找到所以自定义data的值（也就是每一个input中所需要的规则校验），用if来判断，当前的input中配置了几个data属性，并且通过 rule.call(_$field)（这句话的意思就是调用rule函数的时候，rule函数里的this引用变成了_$field），把input中的rule规则判断一下。如果为false，那么就在input的父元素下面添加一个p标签，那么怎么让p标签中的内容让用户来配置呢？<p class=‘message‘>"+(_$field.data(key+"-message")||_$this.errorMessage)+"</p>，这其中的意思是如果错了，那么就不往下检索rule了，直接return result（因为rule返回为false,所以这里的result也为false），来阻止。并且添加p标签，并且根据result的值来判断input的父元素,来个父元素加上一个success或error。最后还有submit方法：这个方法是用来通过input父元素的class中有没有error，来判断触发哪一个自定义事件

　　四：$.fn[plug]

　　　　一：首先判断当前元素是否是from标签，不是的话，throw一个错误

　　　　二：$.extend(this,__dEFAULTS__,options,__PROTOTYPE__);  (....貌似有同学面试死在这个上面了，有空讲一下吧)

　　　　三：this._init(); this._bind(); return this;

　　五：根据业务需求，用户自定义添加rule：就是如下添加一个方法，就可以了，（下次有时间还是讲一下extend吧）　　

　　$.fn[plug].extendRules = function(news){
　　　　$.extend(__RULES__,news);
　　}

　　六：ajax

function login(){
var username = $(‘#username‘).val(),password = $(‘#password‘).val();
var data = { "uname": username, "upwd":password};
$.ajax({
url:‘/login‘,
type:‘POST‘,
data:data,
success:function(data,status){
if(status == ‘success‘){
location.href=‘home‘;
}
},
error:function(data,status){
if(status == "error"){
location.href=‘login‘
}
}
});
}

JS：

;(function(root,factory,plug,undefined){
factory(root.jQuery,plug);
})(window,function($,plug){
//默认参数
var __dEFAULTS__ = {
triggerEvent : "keyup",
errorMessage : "You entered a wrong"
};
/*
require(需求) 必填项
regex（正则表达式）正则验证
length 长度验证
minlength 最短的长度
maxlength 最长的长度
between 两者之间的长度
equalto 和xxx相同
greaterThan 大于
lessThan 小于
middle 两者之间的数字
integer 整数
number 必须是数字
email 邮箱地址
mobile 电话号码
phone 手机号码
uri 有效的统一资源标识符
cardId 身份证号码
bankId 银行卡号码
....其他的规则（根据业务规则来）
*/
var __RULES__ = {
require : function(){
return this.val()!="";
}, //(需求) 必填项
regex : function(){
return new RegExp(this.data("regex")).test(this.val());
},//（正则表达式）正则验证
length : function(){
return this.val().length == Number(this.data("length"));
}, // 长度验证
minlength : function(){
return this.val().length >= Number(this.data("minlength"));
}, // 最短的长度
maxlength : function(){
return this.val().length <= Number(this.data("maxlength"));
}, // 最长的长度
between : function(){
var length = this.val().length;
var between = this.data("between").split("-");
return length >= Number(between[0]) && length <= Number(between[1]);
}, // 两者之间的长度
equalto : function(){
if($(this.data("equalto")).val() === this.val()){
$(this.data("equalto")).parent(".mf-line").removeClass(‘error‘).addClass(‘success‘).next("p").remove();
return true;
}
return false;
}, // 和xxx相同
greaterthan : function(){
return this.val() > Number(this.data("greaterthan"));
}, // 大于
lessthan : function(){
return this.val() < Number(this.data("lessthan"));
}, // 小于
middle : function(){
var length = this.val();
var middle = this.data("middle").split("-");
return length >= Number(middle[0]) && length <= Number(middle[1]);
}, // 两者之间的数字
integer : function(){
return /^\-?[0-9]*[1-9][0-9]*$/.test(this.val());
}, // 整数
number : function(){
return !isNaN(Number(this.val()));
}, // 必须是数字
email : function(){
return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(this.val());
}, // 邮箱地址
mobile : function(){
return /^1\d{10}$/.test(this.val());
}, // 电话号码
phone : function(){
return /^\d{4}\-\d{8}$/.test(this.val());
}, // 手机号码
uri : function(){
return /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w][email protected])?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w][email protected])[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g.test(this.val());
}, // 有效的统一资源标识符
amount : function(){ //金额
if(!this.val())return true;
return /^([1-9][\d]{0,}|0)(\.[\d]{1,2})?$/.test(this.val());
}
};
var __PROTOTYPE__ = {
//初始化dom结构
_init : function(){
this.$fields = this.find(".mf-line .mf-txt:visible"); //选择可见的input(过滤掉display: none)
},
//自定义事件的触发机制
_attachEvent : function(event, args){
this.trigger(event, args);
},
//事件
_bind : function(){
var _$this = this;
//事件功能绑定
this.$fields.on(this.triggerEvent, function(){
var _$field = $(this); //需要验证的表单
var $group = _$field.parents(".mf-line"); //拿到input的div
var result = true;
$group.next("p").remove();
$.each(__RULES__,function(key,rule){
if(_$field.data(key)){
result = rule.call(_$field);
(!result)&&$group.after("<p class=‘message‘>"+(_$field.data(key+"-message")||_$this.errorMessage)+"</p>");
return result;
}
})
$group.removeClass(‘error success‘).addClass(result?‘success‘:‘error‘);
})
this.on("submit", function(){
var $groups = _$this.$fields.trigger(_$this.triggerEvent).parents(".mf-line");
if($groups.filter(".error").length > 0){
_$this._attachEvent("error",{});
}else{
_$this._attachEvent("success",{});
}
return false;
})
}
}
$.fn[plug] = function(options){
//判断this是否是form标签
if(!this.is("form")){
throw new Error("the trgger is not form tag");
}
$.fn.extend(this,__dEFAULTS__,options,__PROTOTYPE__);
this._init();
this._bind();
return this;
}
$.fn[plug].extendRules = function(news){
$.extend(__RULES__,news);
}
},"validator");

//这是调用插件的js

$(function(){
$.fn.validator.extendRules({
cardid : function(){
return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.val());
}
})
$(".member-forms").validator({
triggerEvent : "blur"
})
.on("error", function(event, $errFiles){
return false;
})
.on("success", function(event){
this.submit();
return false;
});
});

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>validata</title>
<link rel="stylesheet" type="text/css" href="css/validata.css" />
</head>
<body>
<div class="wrapper mt30">
<form action="##" class="member-forms" method="get">
<div class="mf-head rel tc">
<span class="f24">用户登录</span>
</div>
<div class="mf-line">
<span class="mf-name">帐号：</span>
<input type="text" class="mf-txt" id="username" placeholder="请输入用户名/手机号"
data-require="true"
data-require-message="用户名必须填写"
data-regex="^\w+$"
data-regex-message="用户应该是由字母数字下划线所组成"
data-between="6-12"
data-between-message="用户名长度必须是在6-12位字符之间"
/>
</div>
<div class="mf-line">
<span class="mf-name">密码：</span>
<input type="password" class="mf-txt" id="password" placeholder="请输入密码"
data-require="true"
data-require-message="密码必须填写"
data-regex="^[a-zA-Z0-9]+$"
data-regex-message="密码应该是由字母数组所组成"
data-minlength="8"
data-minlength-message="密码长度最少8位"
data-maxlength="12"
data-maxlength-message="密码长度最多12位"
/>
</div>
<input type="submit" class="mf-btn mt30" id="loginBtn"/>
</form>
</div>
<script type="text/javascript" src="../jquery-2.2.4.js"></script>
<script type="text/javascript" src="plug_in/validata.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

CSS:

body,html{
width: 100%;
height: 100%;
font-family: "Microsoft yahei";
}
*{
margin: 0;
padding: 0;
}
.tc{
text-align: center;
}
.f24{
font-size: 24px;
}
.rel{
position: relative;
}
.wrapper{
max-width: 1186px;
}
.mt30{
margin-top: 30px;
}
.member-forms{

max-width: 400px;
margin: 20px auto;
padding: 0 10px;
background-color: #fff;
}
.member-forms .mf-line{
margin-top: 30px;
border: 1px solid #ddd;
line-height: 52px;
position: relative;
padding-left: 110px;
border-radius: 4px;
}
.member-forms .mf-line.error{
border: 1px solid #a94442;
}
.member-forms .mf-line.success{
border: 1px solid #3c763d;
}
.member-forms .mf-line .mf-name{
position: absolute;
left: 0;
right: 0;
text-align: center;
width: 110px;
}
.member-forms .mf-line .mf-txt{
display: block;
height: 50px;
width: 96%;
border: 0px;
padding: 0 2%;
}
.member-forms .message{
width: 400px;
font-size: 12px;
color: red;
}
.member-forms .mf-btn{
height: 52px;
line-height: 52px;
color: #fff;
background-color: #5ba0e5;
width: 100%;
text-align: center;
cursor: pointer;
font-size: 18px;
border: 0px;
}

时间： 2024-10-17 15:06:09

jQuery validata插件实现（每周一插件系列）的相关文章

Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?

jQuery超酷下拉插件6种效果演示

原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <div class="container">                       <section class="main clearfix">                 <select id="cd-dr

jquery动态改变背景颜色插件

GETHUB下载地址 背景颜色用animate方法时时无法改变颜色的 所以要使用插件进行补充. 用法: <!DOCTYPE html> <html> <head> <style> div { background-color: #bada55; width: 100px; border: 1px solid green; } </style> <script src="http://code.jquery.com/jquery-1

分享一个jquery功能强大的提示信息插件代码

代码属于提示文字特效,很好,使用有些复杂,请参demo使用 下载地址:jquery功能强大的提示信息插件代码 预览DEMO:DEMO 分享一个jquery功能强大的提示信息插件代码,布布扣,bubuko.com

【锋利的jQuery】表单验证插件踩坑

和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在form中class类名中添加"required","email"等去作为验证时读取的参数. 4. 调用代码: $("#commentform").validate(); 很不幸,报错了.前端有个说法是学新不学旧,这里就不去深究原因,直接提供最新的写法

【jQuery】结合accordion插件分析写插件的方法及注意事项

1.jQuery插件的命名方式:jquery.[插件名].js 2.对象方法附加在jQuery.fn上,全局函数附加在jQuery对象本身上 3.插件内部this指向的是通过选择器获取的jQuery对象 4.结尾加分号,插件头部最好也加分号 5.插件应该返回一个jQuery对象,保证插件的链式操作 6.插件内部应用完整的jQuery而不是$,但可以利用闭包,将jQuery传入,使插件内部可以继续使用$符合作为jQuery别名 7.闭包另一大好处:可以避免内部变量影响全局空间 :(function

第一百八十五节，jQuery，Ajax 表单插件

jQuery,Ajax 表单插件 学习要点: 1.核心方法 2.option 参数 3.工具方法 传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款 form.js 表单的 Ajax 提交插件将解决这个问题. 一．核心方法 官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和 ajaxSubmit(),它们集合了从控制表单元素 到决定如何管理提交进行的功能.

10个免费的响应式jQuery Carousel 轮播图插件

jQuery Carousel 轮播图插件可以给网站创建华丽的动画效果,这里列出的10个jQuery Carousel 轮播图插件都是响应式的,并且可以免费使用. 1. ItemSlide.js 简单的触摸式Carousel 轮播图插件,提供多种样式的旋转动画,如向上滑动,基于全屏的触摸滑动,左右滑动等. 2. Liquid 每当Liquid 容器的大小改变时,都会重新调整列表中的项目数,以适应新的宽度. 3. jCarousel jCarousel 是一个用来控制水平或垂直方向上列表项的jQu

Jquery进度条插件 Progress Bar插件应用方法

搞的我小纠结了一会,最后感谢同事分享文章,得以结局,呵呵,小经验还是要保存的个人使用总结: <script type="text/ 网页特效" src="/Scripts/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="/Scripts/Method/jquery.progressbar.min.js">&

jQuery Json数据格式排版高亮插件json-viewer.js的使用

1.插件介绍: jquery.json-viewer.js是一款查看json格式数据的jquery插件.它可以将混乱的json数据漂亮的方式展示在页面中,并支持节点的伸展和收缩和语法高亮等功能. 2.代码演示: 1).首先引入jquery和json.viewer.js插件 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="js/jque