为了把自己从表单验证中解放出来,特地写了这个插件。下面以一个简单的用户注册表单为例说明用法。
<form id="regForm">
<input type="text" name="userName" />
<input type="password" name="password" />
<input type="password" id="password2" />
<input type="submit" value="提交" />
</form>
这个表单包含三个输入框,分别是用户名(userName)、密码(password),以及为了防止密码输入出错而设置的第二个密码框(password2)。验证规则如下:
- 用户名不能为空;
- 密码不能少于6个字符;
- 两次密码输入必须一致。
要使用表单验证插件,首先要建立一个验证器对象,其参数是表单元素:
var validator = new $.validate.FormValidator($("#regForm"));
随后添加用户名的验证规则:
validator.addRules("userName", ["noempty", "", "用户名不能为空"]);
addRules方法最少要有两个参数:第1个参数是控件名,第2-N个参数是验证规则。验证规则是一个数组:第0个元素是验证指令,除了上面的"noempty",还有"min"(最小值)、"max"(最大值)等,开发者可以根据需要进行扩充;第1个参数是对比值,由于非空验证无须对比值,这里随便输入一个值即可;第2个参数是验证不成功时的提示。按照同样的方法添加密码的规则:
validator.addRules("password", ["minlen", 6, "密码最少应包含6个字符"]);
验证指令"minlen",即最小长度,对比值是6,意思是最小长度不能小于6。密码的另一条规则有点特殊,需要用自定义规则:
validator.addRules("password", [function(value) {
return value == $("#password").value.trim();
}, "两次密码输入不一致"]);
自定义规则的数组格式与指令验证不同,它只有两个参数:第一个参数是验证函数,仅当返回值是false时表示验证不成功;第二个参数是验证不成功时的提示。
暂时介绍到这,由于本插件的功能还有待完善,目前不发布下载,有兴趣的朋友可以从SVN同步。

