代码改变世界

Fancy Validate – JavaScript 表单验证

2012-02-05 15:36 囧月 阅读(...) 评论(...) 编辑 收藏

用过许多javascript表单验证的工具,比较好用是强大的jQuery.validate等jQuery插件,当然Mootools FormCheck也不错。

在asp.net中的问题

在asp.net中,经常会使用MasterPage或者一些容器控件,就导致表单元素的id/name变成一长串,即使asp.net 4中可以设置ClientIDMode为Static,生成的name也依然是一长串。

这些工具(比如jQuery.validate,它的规则名称是与表单元素的name关联的)要在asp.net中使用,就必须借助ClientID/UniqueID等东西,在javascript代码中插入较多的<%…%>代码块,用起来比较烦人。

当然这些工具也可以直接把规则定义在html属性中,但这样对html污染比较厉害(特别是提示消息):

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

如果jQuery.validate能够支持自定义属性名称来作为它的规则key,那么就很完美了,如下:

<script>
$("#form1").validate({
  key: "mykey", //这是愿望
  rules: {
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    email: "Please enter a valid email address"
  }
});
</script>
<input type="text" id="ctl00_panel1_email" name="ctl00$panel1$email" mykey="email" />

当然,目前来说,这只存在幻想中。

对验证工具的期望

虽然jQuery.validate在asp.net中还有一点不够理想,但我依然认为它是最强大的,通过对它的认识,得出以下一些主要期望:

  1. 在javascript代码中定义验证规则及提示消息
  2. 在表单元素属性中定义验证规则及提示消息
  3. 验证规则的名称可以与表单元素自定义属性,即可以是name/id/mykey等
  4. 提示信息的呈现,以及自定义呈现方式
  5. 手动注册表单元素

以及一些不太紧要的期望:

  1. 更宽松的规则定义,在html属性中(相对于jQuery.validate)
  2. html5属性提取为规则
  3. 在不支持html5 placeholder的浏览器上实现placeholer效果
  4. 可以通过工具来生成规则
  5. 预定义一些样式,用于呈现提示信息

既然有了期望有了目标,那么接下来就是实现这个目标

Fancy Validate

JavaScript表单验证工具,不依赖任何JavaScript Library(如:jQuery/PrototypeJS/YUI等),但可以和它们很好的集成。
参考并使用了jQuery的部分实现,并高度模仿了jQuery.validate插件,提供更灵活的规则定义,对 asp.net 有更好的支持(不用再写烦人的ClientID)。

------

以上为介绍,这是通过较长时间去观察、使用、比较现有的一些表单验证工具,提取我认为有用的东西,并用花了较长的时间去开发的一个表单验证工具。

不依赖任何JavaScript类库:

这是因为我比较喜欢使用jQuery,而jQuery下的表单验证插件都比较完善、比较强大,所以决定不依赖任何类库,这样体积相对小了很多;但在实现上使用了一些jQuery的实现。

也因为不借助任何类库,所以就没有内置的选择器,如jQuery的Selector;为了能够快速找到表单元素,就借助了form.elements属性,并且把定义了规则的表单元素保存起来。

高度模仿jQuery.validate:

jQuery.validate是我认为最强大的表单验证工具,发展了这么久,已经非常成熟,应用也是非常广泛。所以在较多的地方都模仿仿了它的实现,比如规则的定义、提示消息、提示消息的呈现等,在某些地方比它更灵活一些。

也因为这样,可以很方便的从jQuery.validate迁移到Fancy Validate。

规则名称与表单元素自定义属性对应:

这个是最期望的功能,为了不再写烦人的ClientID,提供更好的灵活性;在此之外也提供了一个方法,用于从一长串的name中提取服务器端id;这都是为了能更好的在asp.net中使用。

------

目前功能基本都已实现,但是有些地方实现的还是比较粗糙,只能期待未来再扩展优化了。

结尾

点击下载:fancy validate及DEMO 或者访问:http://code.google.com/p/fancyvalidate/

最后,放图一张:

fancyvalidate