强大的表单验证工具jquer tools-Validator
2010年10月20日
1 条评论
jQuery的tools插件是很贴近实际需求的UI扩展，有tab,tip等，今天介绍表单验证的插件：Validator。
表单验证在WEB项目中太常见了，很简单，但是很烦琐。toos家族中Validator就是来拯救大家的。 下面来简单介绍一下：
一 基本用法
如果要验证某个表单，你仅仅需要一行代码：
$("#myform").validator();
当表单提交的时候，就会来验证。验证规则写在表单元素的属性中，比如某个输入框是必填项目，那么就这样：
<input required="required" name="name" type="text" />
中间的required就是表示这个表单项目是必填！
更加详细的demo请看：http://flowplayer.org/tools/demos/validator/index.html
二 几个配置说明
1 singleError 是否依次验证，还是一次验证所有。如果你想一次验证一个，就设为ture，否则为false
2 effect 错误信息展示的效果，默认为default。你可以建立自己的effect：
$.tools.validator.addEffect("wall", function(errors, event) { $.each(errors, function(index, error) { // erroneous input var input = error.input;//出错的input表单项目 // error messages for the input (Array) var errors = error.messages;//出错的信息，一般取errors[0] alert(errors[0]); input.focus(); input.css({borderColor: 'red'}); }); }, function(inputs) { // 当验证成功之后的回调 inputs.css({borderColor: 'blue'}); });
三 自定义出错信息
有时候出错信息不想用系统预先定义的信息，那么在input选项里面加上属性data-message：
<input date-message="出错啦" type="text" />
四 自定义验证选项
当自定义的一些验证规则，有如下两种方法：
1 给自定义的type增加
如想给type为time增加验证规则，那么就：
$.tools.validator.fn("[type=time]", "时间格式不对", function(input, value) { return /^\d\d:\d\d$/.test(value); });
那么在页面中这样既可：
<input type="time" />
二 验证属性
这个方法是最方便也是最广泛的，如果想验证最小长度：
$.tools.validator.fn("[minlength]", function(input, value) { var min = input.attr("minlength"); return value.length >= min ? true : { en: "Please provide at least " +min+ " character" + (min > 1 ? "s" : ""), fi: "Kentän minimipituus on " +min+ " merkkiä" }; });
那么如果有minlength属性的表单都会验证，如：
<input minlength="6" type="text" />
后记：这个表单验证的扩展是我见过最为方便使用和自定义和扩展的。本文只是抛砖引玉，给出在使用表单验证的tools的关键点，更加详细的资料请看：
