Fancy Validate

用过许多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 
 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"  />

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

对验证工具的期望

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

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

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

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

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

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/

最后，放图一张：

Fancy Validate – JavaScript 表单验证