jQuery Validate

Posted CY007

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery Validate相关的知识,希望对你有一定的参考价值。

jQuery Validate

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。

该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使

用英语作为错误信息,且已翻译成其他 37 种语言。

该插件是由 J?rn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit(量子系统) 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现,并一直更新至今。目前版本是 1.14.0

访问 jQuery Validate 官网,下载最新版的 jQuery Validate 插件。

CY提供的 1.14.0 版本下载地址:http://static.runoob.com/download/jquery-validation-1.14.0.zip

 

1.导入 js 库(使用提供的CDN)

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js">
</script>

插件描述:Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,html、CSS与JS之间的低耦合能让您自由布局

和丰富样式,支持input,select,textarea的验证。

Description

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

jQuery版本:1.7.0+

2.Usage

载入jQuery、validate

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

3.DOM标签验证规则填写

<div class="form_control">
  <input class="required" value="[email protected]" 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;
    }
  });
Method Params Type Description
onFocus arguments => event Function 获取焦点时的callback
onBlur arguments => event Function 失去焦点时的callback
onChange arguments => event Function 触发change的callback
type 自定义验证规则,参数顺序:value,errorMsg,el
 

 

表单提交前的验证

  $(‘form‘).on(‘submit‘, function(event) {
    event.preventDefault();
    $(this).validate(‘submitValidate‘); //return true or false;
  });








 















以上是关于jQuery Validate的主要内容,如果未能解决你的问题,请参考以下文章

jquery.validate.js的基本用法入门

jquery.validate 的ajax验证(转)

使用 jquery.validate.unobtrusive 验证复选框

当 jquery.validate 验证表单时启用提交按钮

是否满足于使用JQuery Validate?

jQuery.validate.js表单验证插件