UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery-validate验证插件

所属分类：输入-验证

 201938  499  查看评论 (24)
分享到微信朋友圈
X
jQuery-validate验证插件 ie兼容7
 查看演示  website  立即下载

Validate

Validate是基于jQuery的一款轻量级验证插件，内置丰富的验证规则，还有灵活的自定义规则接口，HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式，支持input,select,textarea的验证。

Description

浏览器支持：IE7+ 、Chrome、Firefox、Safari、Mobile Browser

jQuery版本：1.7.0+

Usage

载入jQuery、validate

    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript" src="jquery-validate.js"></script>

DOM标签验证规则填写

<div class="form_control">
  <input class="required" value="315359131@qq.com" type="text" name="email" data-tip="请输入您的邮箱" data-valid="isNonEmpty||isEmail" data-error="email不能为空||邮箱格式不正确">
</div>
<div class="form_control">
  <select class="required" data-valid="isNonEmpty" data-error="省份必填">
    <option value="">请选择省份</option>
    <option value="001">001</option>
    <option value="002">002</option>
  </select>
</div>
  • 给需要验证的表单元素的class填入required（不建议在这个class上做其他样式）。
  • 建议input用独立div包裹，因为验证的message是从当前input的父元素上append生成。
  • data-tip：在尚未验证而获取焦点时出现的提示。
  • data-valid：验证规则，若有组合验证，以||符号分割。
  • data-error：验证错误提示，对应data-valid，以||符号分割。
  • 单选/复选比较特殊，需要添加元素包裹单选/复选集合，并在包裹元素上加验证规则。
<div class="form_control">
  <span class="required" data-valid="isChecked" data-error="性别必选" data-type="radio">
      <label><input type="radio" name="sex">男</label>
      <label><input type="radio" name="sex">女</label>
      <label><input type="radio" name="sex">未知</label>
  </span>
</div>
<div class="form_control">
  <span class="required" data-valid="isChecked" data-error="标签至少选择一项" data-type="checkbox">
      <label><input type="checkbox" name="label">红</label>
      <label><input type="checkbox" name="label">绿</label>
      <label><input type="checkbox" name="label">蓝</label>
  </span>
</div>

JS调用

//**注意：必须以表单元素调用validate**
  $('form').validate({
    type:{
      isChecked: function(value, errorMsg, el) {
        var i = 0;
        var $collection = $(el).find('input:checked');
        if (!$collection.length) {
          return errorMsg;
        }
      }
    },
    onFocus: function() {
      this.parent().addClass('active');
      return false;
    },
    onBlur: function() {
      var $parent = this.parent();
      var _status = parseInt(this.attr('data-status'));
      $parent.removeClass('active');
      if (!_status) {
        $parent.addClass('error');
      }
      return false;
    }
  });
MethodParamsTypeDescription
onFocusarguments => eventFunction获取焦点时的callback
onBlurarguments => eventFunction失去焦点时的callback
onChangearguments => eventFunction触发change的callback
type自定义验证规则，参数顺序：value,errorMsg,el

表单提交前的验证

  $('form').on('submit', function(event) {
    event.preventDefault();
    $(this).validate('submitValidate'); //return true or false;
  });
相关插件-验证
查看更多

大气简洁的登录注册特效

 大气简洁的登录注册特效带注册验证
  验证
 69818  625

jQuery滑动验证可重置

 登陆页面用到验证的一种方式，滑动验证。预防代码恶意破坏也可用于重置密码获取短信验证码等。只是纯前端校验，相比图片滑动验证还是稍显劣势。
  验证
 19823  239

Modern Fms 表单验证插件

 Modern Fms(精美的纯css3 html5表单框架) 表单验证插件
  验证
 14225  181

jQuery移动端手势登陆验证

 jQuery移动端手势登陆验证功能
  验证
 14171  198

讨论这个项目（24）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    LiangXiXiXi 0
    2019/6/13 16:00:26
    大佬 确认密码、文本域没的诶 回复
    ^-^ 0
    2019/3/29 13:37:44
    有什么办法把失焦事件改成 点击提交按钮的时候再去校验表单的内容
        　　　　　　　　1
        2019/4/30 15:14:05
        你那样还不好 因为:假如有很多需要输入内容的 等你输入完了 然后点击提交 才发现有些内容写的不规范 然后重新改 你会不会觉得烦 所以还是失去焦点 让用户体验好一点
    回复
    易字决 0
    2018/12/26 9:34:03
    长度怎么限制？
    回复
    单人旅途、 0
    2018/2/2 14:41:09

    最大长度和最小长度的length怎么传啊?

    回复
    Let me go ° 0
    2017/9/7 16:24:01
    我测试过了，还是蛮不错的，但是我想知道如何把错误信息，固定在某一个地方显示，不想让他在每个input后面显示错误信息？紧急求助！！！
        　　　　　　　　1
        2019/4/30 15:00:16
        你可以用attr来获取他的某个属性(属性里面有显示的信息)然后把他赋给一个span或者其他 然后给定位就可以了 这个是简单方法 我也是刚学 应该有用 我经常用这种简单方法 但是如果有太多需要显示 就不建议使用
    回复
    丶似浅 1
    2017/2/9 21:50:01
    该插件存在多种bug 修改个别问题如下151行：添加if(msg)判断；223行前插入：if (!dataValid){dataValid = 'isNonEmpty'}
        琅琊丶 0
        2017/2/10 7:34:17

        谢谢你提的Bug，这个插件由于开始的时候考虑不够成熟，也没有去继续维护，所以留下很多bug，这个网站上我一直想下架这个组件却找不到门路，非常抱歉

        LiangXiXiXi0
        2019/6/13 15:10:41
        大哥 还好你没下架 我看了这么多插件就只看得懂你的
        ps：新手 （手动滑稽）
    回复
    1205422106 0
    2016/8/7 11:08:03
    琅琊丶 0
    2016/8/2 22:08:16
    作者语：这个插件已经许久不维护了，也并不成熟，不建议大家投入生产线，仅供学习参考 回复
    垂泪『标点』 0
    2016/7/14 11:07:21
    我想问下 作者     你插件里能不能实现聚焦功能  比如我的form表单里面内容比价多  有很多个input   当我点击提交的时候 自动聚焦到当前验证没通过的input   回复
    蕉泥座人 0
    2016/5/9 11:05:14
    把一大堆复杂的东西简单化，实例化，不错，赞一个 回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复