这篇文章将为大家详细讲解有关jQuery如何实现validata插件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
为了打LOL,我写快点，代码我都复制在最下面了，并且写了大量的注释。
首先我写jquery插件，喜欢这么写（好处有很多，以后在讲，哈哈，看过jQuery源码应该知道）：
(function(root,factory,plug,undefined){
factory(root.jQuery,plug)
})(window,function($,plug){
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]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[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) { //根据业务需求增加rule
$.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" rel="external nofollow" />
</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：
<style type="text/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;
}
</style>关于“jQuery如何实现validata插件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
