Fancy Validate 与 jQuery.validate 对比（中）：应用篇

续上一篇对比了Fancy Validate与jQuery.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个参数(ruleKey 和 ruleKeyAlter)用于更改key名称，这样做就不必为了在asp.net中写一堆ClientID烦恼了。

如下，典型的在asp.net中的控件模样：

<input  />

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

<input  />

  $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  />
<input  />
...
<input  />

  $f("fancyform", {
    rules: {
      ...其他规则
      lwmeAtCnblogs: { required: 1, email: 1, minlength: 7 }
    }
    , messages: {
      ...其他规则的提示信息
      lwmeAtCnblogs: { required: "必须填写", email: "email格式不正确" }
    }
    , ruleKeyAlter: "data-rule"
  });

除了ruleKey/ruleKeyAlter，Fancy 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则提供了较多样式，以及提示的效果。

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