大家好，第一次写有点正规的博客，以前都是随手复制几下。为了打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" }; 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插件实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。