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]+@)?[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插件实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • jQuery验证插件validate使用方法详解

    1. 写在前面 我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改. 记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单.流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到session中,跳转到一个新的页

  • jQuery validate插件实现ajax验证重复的2种方法

    本文实例讲述了jQuery validate插件实现ajax验证重复的2种方法.分享给大家供大家参考,具体如下: jquery validate 经过这种多年的改良,已经很完善了.它能满足80%的验证需要,如果validate自带的功能,不能满足我们需求,它提供了addMethod来扩展功能.下面就举个小例子来说明一下addMethod的用法. 完整demo实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//

  • jQuery Validate插件实现表单验证

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言.更重要的是他是由jQuery 团队. jQuery UI 团队的主要开发人员Jörn Zaefferer 编写和维护的.具体我们可以访问 jQuery Validate 官网,下载

  • jQuery validate插件功能与用法详解

    本文实例讲述了jQuery validate插件功能与用法.分享给大家供大家参考,具体如下: 前言:对于表单内容格式的验证,原生JS的写法,较为繁琐,笔者曾在写一个注册界面的时候,验证邮箱格式,用户名格式,密码格式,多处使用了正则,并且错误提示信息也要用display:none/显示隐藏,在用过jQuery validate插件后,则大大加快了开发速度! 1.jQuery validate插件提供了强大的验证功能,jQuery validate插件的官网是http://jqueryvalidat

  • jQuery validata插件实现方法

    大家好,第一次写有点正规的博客,以前都是随手复制几下.为了打LOL,我写快点,代码我都复制在最下面了,并且写了大量的注释. 首先我写jquery插件,喜欢这么写(好处有很多,以后在讲,哈哈,看过jQuery源码应该知道): (function(root,factory,plug,undefined){ factory(root.jQuery,plug) })(window,function($,plug){ /* 在这里写逻辑 一:默认的参数 var __dEFAULTS__, 二:规则(可根据

  • jQuery定义插件的方法

    有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法. 扩展jquery的时候.最核心的方法是以下两种: $.extend(object) 可以理解为jquery添加一个静态方法 $.fn.extend(object) 可以理解为jquery实例添加一个方法 $.extend(object) 例子: /* $.ex

  • 制作高质量的JQuery Plugin 插件的方法

    JQuery Plugin插件,如果大家不明白什么是JQuery插件或都不清楚如何编写可以查看其官方的网站:jQuery Authoring Guidelines好了,下面有一些我觉得想做一个好的插件必须应有的要求: 1.在JQuery命名空间下声明只声明一个单独的名称 2.接受options参数,以便控制插件的行为 3.暴露插件的默认设置 ,以便外面可以访问 4.适当地将子函数提供给外部访问调用 5.保持私有函数 6.支持元数据插件 下面将逐条地过一遍: 只声明一个单独的名称 这表明是一个单独

  • webpack里使用jquery.mCustomScrollbar插件的方法

    malihu-custom-scrollbar-plugin是一个依赖jquery的自定义网页滚动条样式插件 网站: http://manos.malihu.gr/jquery-custom-content-scroller/ github: https://github.com/malihu/malihu-custom-scrollbar-plugin jquery.mCustomScrollbar在npm上写了在webpack里使用的方法 但是其只说啦引用js,还需要配合mCustomScr

  • jQuery dateRangePicker插件使用方法详解

    jQuery dateRangePicker插件使用总结. 版本说明: 当前使用版本:2.1.25 特别说明:版本不同,部分api可能会发生变化,需要引起重点关注 效果图 关键代码片段 $("#dateTimeRange span").html(moment().subtract(1, 'hours').format('YYYY-MM-DD HH:mm') + '~' + moment().format('YYYY-MM-DD HH:mm')); $("#dateTimeRa

  • 如何在Angular2中使用jQuery及其插件的方法

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大多基于jQuery和它的插件.而且现在Angular2的组件生态还不是很完善,我们在编写Angular的时候也许会想要用到jQuery.本篇文章就简单介绍下在Angular2中使用jQuery 如果你不知道怎么搭建Angular2开发环境,请参考这篇文章:http://www.jb51.net/ar

  • jquery简单插件制作(fn.extend)完整实例

    本文实例讲述了jquery简单插件制作方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=&qu

  • jQuery分页插件jquery.pagination.js使用方法解析

    jquery.pagination.js插件,此jQuery插件为Ajax分页插件,一次性加载全部数据,故分页切换时无刷新与延迟,只是重写指定dom元素中的html内容,如果数据量较大不建议用此方法,因为加载会比较慢: jQuery的多数插件使用都比较简单,都能查找出相关api,且含有demo: 使用此插件,首先在页面(jsp.html)中引入其js.css文件 <link href="/自定义路劲/jquery.pagination/pagination.css" rel=&q

  • jQuery遮罩层实现方法实例详解(附遮罩层插件)

    本文实例分析了jQuery遮罩层实现方法.分享给大家供大家参考,具体如下: 1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ display: none; position: absolute; top: 0px; lef

  • jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法

    本文实例讲述了jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法.分享给大家供大家参考,具体如下: 大家都知道,ArtDialog是一款非常不错的.轻量级的.基于jQuery的对话框插件,深受大家的追捧,大伙可以到一下地址进行下载: https://code.google.com/p/artdialog/ https://github.com/aui/artDialog 截止到2014年9月17日,已经有几个重大的版本v4.1.7.v5.0.4和v6.0.2,其中4.x

随机推荐