搜索
首页web前端js教程jQuery validata插件实例详解

jQuery validata插件实例详解

小云云
小云云
Jan 06, 2018 am 10:33 AM
jquery详解

本文主要为大家带来一篇jQuery validata插件实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

首先我写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标签中的内容让用户来配置呢？

"+(_$field.data(key+"-message")||_$this.errorMessage)+"

，这其中的意思是如果错了，那么就不往下检索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(&#39;error&#39;).addClass(&#39;success&#39;).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的p
          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=&#39;message&#39;>" + (_$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>
  <p class="wrapper mt30">
    <form action="##" class="member-forms" method="get">
      <p class="mf-head rel tc">
        <span class="f24">用户登录</span>
      </p>
      <p 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位字符之间" />
      </p>
      <p 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位" />
      </p>
      <input type="submit" class="mf-btn mt30" id="loginBtn" />
    </form>
  </p>
  <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.js 插件集合，想要的都在这里

jquery validata 表单验证DEMO

jQuery插件DataTables分页开发技术分享

以上是jQuery validata插件实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
Python vs. JavaScript：您应该学到哪种语言？Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

JavaScript框架：为现代网络开发提供动力JavaScript框架：为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑：1.项目规模和复杂度，2.团队经验，3.生态系统和社区支持。

JavaScript，C和浏览器之间的关系JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr

node.js流带打字稿node.js流带打字稿Apr 30, 2025 am 08:22 AM

Node.js擅长于高效I/O，这在很大程度上要归功于流。 流媒体汇总处理数据，避免内存过载 - 大型文件，网络任务和实时应用程序的理想。将流与打字稿的类型安全结合起来创建POWE

Python vs. JavaScript：性能和效率注意事项Python vs. JavaScript：性能和效率注意事项Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差异主要体现在：1)Python作为解释型语言，运行速度较慢，但开发效率高，适合快速原型开发；2)JavaScript在浏览器中受限于单线程，但在Node.js中可利用多线程和异步I/O提升性能，两者在实际项目中各有优势。

JavaScript的起源：探索其实施语言JavaScript的起源：探索其实施语言Apr 29, 2025 am 12:51 AM

JavaScript起源于1995年，由布兰登·艾克创造，实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。

幕后：什么语言能力JavaScript？幕后：什么语言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行，依赖JavaScript引擎解析和执行代码。1）解析阶段生成抽象语法树（AST）；2）编译阶段将AST转换为字节码或机器码；3）执行阶段执行编译后的代码。

Python和JavaScript的未来：趋势和预测Python和JavaScript的未来：趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括：1.Python将巩固在科学计算和AI领域的地位，2.JavaScript将推动Web技术发展，3.跨平台开发将成为热门，4.性能优化将是重点。两者都将继续在各自领域扩展应用场景，并在性能上有更多突破。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

Windows 11 KB5054979中的新功能以及如何解决更新问题
4 周前ByDDD
如何修复KB5055523无法在Windows 11中安装？
3 周前ByDDD
如何修复KB5055518无法在Windows 10中安装？
3 周前ByDDD
R.E.P.O.的每个敌人和怪物的力量水平
3 周前By尊渡假赌尊渡假赌尊渡假赌
蓝王子：如何到达地下室
3 周前ByDDD
显示更多

热工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7923
15
Java教程
1652
14
CakePHP 教程
1411
52
Laravel 教程
1303
25
PHP教程
1249
29
显示更多