代码改变世界

Fancy Validate 与 jQuery.validate 对比(中):应用篇

2012-02-13 21:37 by 囧月, ... 阅读, ... 评论, 收藏, 编辑

上一篇对比了Fancy ValidatejQuery.validate的参数及规则,本篇通过实际应用来比较两者的异同。

在表单元素属性中定义验证规则

jQuery.validate支持以下几种方式:

1.普通class规则

<input class="required email url date dateISO dateDE number numberDE digits creditcard" />

各个规则之间用空格隔开,注意:此种方式仅支持以上列出的规则,若需要使用有参数的规则(如minlength),则需要使用JSON格式的规则。

2.定义JSON格式的规则

<input class="{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}"/>

把规则和相应的messages定义在一对"{..}"大括号中。

3.定义在自定义meta中(在class中)

为了不与一些样式混合,可以使用自定义meta,首先在javascript代码中设置meta:

$("#form1").validate({ meta: "validate" });

然后,在自定义meta中写验证规则:

<input class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}"/>

4.自定义html属性

首先,在javascript代码中设置自定义的html属性:

$.metadata.setType("attr", "data-validate");

然后,使用:

<input data-validate="{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}"/>

5.规则名称对应的html属性

还支持以下方式定义规则:

<input required email="true" minlength="3" maxlength="10" />

这些属性(required,email,minlength等)都对应已有的规则

Fancy Validate支持的方式

Fancy Validate没有jQuery.validate那么多麻烦的方式,仅仅支持在自定义html属性中定义规则,默认使用"data-val"属性。

<input data-val="required,email,numeric" />
<input data-val="required,email,numeric,minlength:1,maxlength:10" />
<input data-val="required,email,numeric,minlength:1,maxlength:10,messages:{required:'必须填写',email:'邮箱格式不正确'}" />
<input data-val="rules:{required,email,numeric}" />
<input data-val="rules:{required:1,email:1,maxlength:10},messages:{required:'必须填写',email:'邮箱格式不正确'}" />
<input data-val="rules:{required:1,email:1,maxlength:10,messages:{required:'必须填写',email:'邮箱格式不正确'}}" />

不需要区分class,json什么的,可以混合着写,另外可以通过更改ruleAttr参数来使用别的自定义html属性:

$f("fancyform", {ruleAttr: "data-validate"});

此外,Fancy Validate还支持html5属性

主要为required/min/max/pattern四种规则,以及对不支持html5 placeholder属性的浏览器使用自定义的placeholder/watermark效果

<input name=”age” placeholder="输入年龄" required pattern="^\d+$" min="10" max="200" />

相应的提示信息需要在javascript代码中定义:

$f("fancyform", {
  messages: {
    age: { 
      required: "年龄必须填写",
      pattern: "必须是数字"
    }
  }
});

在JavaScript代码中定义规则

jQuery.validate

  $("#fancyform").validate({
    rules: {
      lwmeAtCnblogs: { required: true, email: true, minlength: 7 }
    }
    , messages: {
      lwmeAtCnblogs: { required: "必须填写", email: "email格式不正确" }
    }
  });
Fancy Validate也差不多,只不过messages可以定义到rules具体规则里面:
  //方式1
  $f("fancyform", {
    rules: {
      lwmeAtCnblogs: { required: 1, email: 1, minlength: 7 }
    }
    , messages: {
      lwmeAtCnblogs: { required: "必须填写", email: "email格式不正确" }
    }
  });
  //方式2
  $f("fancyform", {
    rules: {
      lwmeAtCnblogs: { required: 1, email: 1, minlength: 7
        , messages: { required: "必须填写", email: "email格式不正确" }
      }
    }
  });

规则的key名称及对asp.net的支持

假如有如下表单元素:

<input name="lwmeAtCnblogs" />

使用在javascript中定义规则,那么表单元素的name属性就是规则的key名称(这里是lwmeAtCnblogs)。

jQuery.validate默认使用name属性且不可以更改(至少没有发现可配置的参数,难道让我改它的实现?);Fancy Validate默认也使用name属性,但提供了2个参数(ruleKeyruleKeyAlter)用于更改key名称,这样做就不必为了在asp.net中写一堆ClientID烦恼了。

如下,典型的在asp.net中的控件模样:

<input id="ctl00_panel1_lwmeAtCnblogs" name="ctl00$panel1$lwmeAtCnblogs" />

jQuery.validate就必须用到ClientID/UniqueID了;而对于Fancy Validate则可以添加一个自定义html属性并自定义ruleKey属性

<input id="ctl00_panel1_lwmeAtCnblogs" name="ctl00$panel1$lwmeAtCnblogs" data-rule="lwmeAtCnblogs" />
  $f("fancyform", {
    rules: {
      lwmeAtCnblogs: { required: 1, email: 1, minlength: 7 }
    }
    , messages: {
      lwmeAtCnblogs: { required: "必须填写", email: "email格式不正确" }
    }
    , ruleKey: "data-rule"
  });

假如页面中大部分表单元素的id/name都是正常的,只是小部分id/name是asp.net特有的模样,则可以自定义ruleKeyAlter属性:

<input id="lwmeAtCnblogs1" name="lwmeAtCnblogs1" />
<input id="lwmeAtCnblogs2" name="lwmeAtCnblogs2" />
...
<input id="ctl00_panel1_lwmeAtCnblogs" name="ctl00$panel1$lwmeAtCnblogs" data-rule="lwmeAtCnblogs" />
  $f("fancyform", {
    rules: {
      ...其他规则
      lwmeAtCnblogs: { required: 1, email: 1, minlength: 7 }
    }
    , messages: {
      ...其他规则的提示信息
      lwmeAtCnblogs: { required: "必须填写", email: "email格式不正确" }
    }
    , ruleKeyAlter: "data-rule"
  });

除了ruleKey/ruleKeyAlterFancy Validate还提供了一个简单的函数,用于从表单元素的name属性中提取服务器端id,所以也可以这么使用:

  $f("fancyform", {
    ...规则及提示
    , getKey: $f.getKeyForAspnet
  });

一些显示方式

在容器中显示

jQuery.validate要把错误提示信息显示在容器中,需要指定errorContainer参数:

$("#form1").validate({
  ..各种规则
  errorContainer: container,
});

Fancy Validate取消了errorContainer参数,使用自定义appendLabel函数:

$f("fancyform", {
  ...各种规则
  , validCls: ""
  , container: document.getElementById("container")
  , appendLabel: $f.appendContainer
});

也需要指定container,但仅用于$f.appendContainer函数中。

错误提示的样式

jQuery.validate仅提供了一些简单的样式;Fancy Validate则提供了较多样式,以及提示的效果。

当然,这一点并不太重要。