使用fValidator+iMask实现客户端验证

fValidator和iMask都是来自http://zend.lojcomm.com.br的JS脚本。http://zend.lojcomm.com.br还提供了实现内容滚动特效和图片的鱼眼特效的js脚本。但是在这里，只讨论如何通过fValidator和iMask来快速构建客户端验证。

首先，还是先看http://zend.lojcomm.com.br提供的例子：http://zend.lojcomm.com.br/fvalidator/exampleB.asp

怎么样？是不是很酷？

实际上，关于如何使用fValidator和iMask，官方网站已经提供了简单明了的说明。fValidator和iMask依赖于另一个js——mootools.js。

官方说可以从http://mootools.net/下载mootools.js，但是现在的mootools.js的版本是1.1.1,与fValidator搭配似乎有问题。官方提供的例子中使用的是mootools.v1.1.js，可以从这里下载：http://zend.lojcomm.com.br/common/js/mootools.v1.1.js,

iMask.js从这里下载：http://zend.lojcomm.com.br/imask/js/iMask-full.js,

fValidator.js从这里下载：http://zend.lojcomm.com.br/fvalidator/js/fValidator-full.js

分别下载上述三个js之后，就可以开始构建我们的JS应用了。按照官方的Simple，可以很快地看到结果。fValiator和iMask分别通过表单元素的class属性和alt属性注册并设定相关参数。

如：

<input id="exB_Email" class="fValidate['required','email']" name="email" type="text" />

这样，我们只需要添加这样一行JS代码，就可以拥有默认的表单验证：

window.addEvent("domready", function() {
var exValidatorB = new fValidator("exB");
});

这段代码会遍历id=exb的Form中的所欲元素，解析其class属性中设定的验证规则，并将相应的验证方法绑定到元素的onblur事件。exB_Email将获得默认的“必须输入”和“E-mail格式”验证。

但是，这种做法有两个缺点，一个是会使得HTML看上去很怪异，并且无法设定具体每个字段的错误提示信息。因此，需要采用第二种方法。

第二种方法需要将js代码写成：

window.addEvent("domready", function() {
var exValidatorB = new fValidator("exB");
exValidatorB.register("exB_Name",{type: "required", re: /[^.*]/, msg: "必须输入"});
});

通过代码显式地注册一个验证规则。"exB_Name"是字段的id,后面是一个JSON。其中type指定了验证规则，re是规则正则表达式，msg是提示信息。一下是目前支持的验证规则，在注册时需要提供对应的属性：

required: {type: "required", re: /[^.*]/, msg: "This field is required."},
alpha: {type: "alpha", re: /^[a-z ._-]+$/i, msg: "This field accepts alphabetic characters only."},
alphanum: {type: "alphanum", re: /^[a-z0-9 ._-]+$/i, msg: "This field accepts alphanumeric characters only."},
integer: {type: "integer", re: /^[-+]?/d+$/, msg: "Please enter a valid integer."},
real: {type: "real", re: /^[-+]?/d*/.?/d+$/, msg: "Please enter a valid number."},
date: {type: "date", re: /^((((0[13578])|([13578])|(1[02]))[//](([1-9])|([0-2][0-9])|(3[01])))|(((0[469])|([469])|(11))[//](([1-9])|([0-2][0-9])|(30)))|((2|02)[//](([1-9])|([0-2][0-9]))))[//]/d{4}$|^/d{4}$/, msg: "Please enter a valid date (mm/dd/yyyy)."},
email: {type: "email", re: /^[a-z0-9._%-]+@[a-z0-9.-]+/.[a-z]{2,4}$/i, msg: "Please enter a valid email."},
phone: {type: "phone", re: /^[/d/s ().-]+$/, msg: "Please enter a valid phone."},
url: {type: "url", re: /^(http|https|ftp)/:////[a-z0-9/-/.]+/.[a-z]{2,3}(:[a-z0-9]*)?//?([a-z0-9/-/._/?/,/'/////+&%/$#/=~])*$/i, msg: "Please enter a valid url."},
confirm: {type: "confirm", msg: "Confirm Password does not match original Password."},

fValidator.js很容易理解，大家可以根据自己的需要对其进行一些改写。虽然fValidator和iMask并不能替代服务器端验证和Ajax验证，但是它们确实可以使我们快速地构建起具有良好用户体验的客户端验证。因此，我觉得fValidator+iMask+Ajax+服务器端验证，将是一个完美而完整的验证体系。