基于prototype的易用表单验证(轉)

简介

基本的方式是在表单发生onsubmit事件的时候，遍历表单所有元素的class属性而执行需要验证。如果验证失败，则显示验证建议并阻止表单提交。

DEMO：http://tetlaw.id.au/upload/dev/validation/valid.html

下载：http://tetlaw.id.au/upload/dev/validation/validation1.5.3.zip

首先嵌入javascript库，一般写入header里面（注意写代码的时候把全角的<>换成半角的）：
<script src="prototype.js" type="text/javascript"></script>
<script src=”validation.js” type=”text/javascript”></script>

然后像下面一样写表单元素，在class属性中写入需要的验证:<input class="required validate-number" id="field1" name="field1" />

最后通过如下的方式通过form对象或者form的id来激活验证

<script type="text/javascript">
     new Validation('form-id'); // OR new Validation(document.forms[0]);
</script>

它里面内置了大量的检验，但是也有包含自己定制检验代码的扩展。

验证时也避免了验证通过css属性设置display：none的区域或者元素的子元素。这种方式可以保证只能得到在form中是可见的且class的属性值为required的区域。
选项

下面是一个加入验证元素的可用的类清单：

   1. required (非空白)
   2. validate-number (合法的数：比如33，3.3)
   3. validate-digits (仅是数字)
   4. validate-alpha (仅是字母)
   5. validate-alphanum (仅是数字和字母)
   6. validate-date (合法的时间)
   7. validate-email (合法的Email地址)
   8. validate-url (合法的URL)
   9. validate-date-au (日期规则; dd/mm/yyyy)
  10. validate-currency-dollar (合法的美元值)
  11. validate-one-required (至少一个多选/单选项被选择 - 见后*)

*为了使用validate-one-required验证符，你必须把该类名只放入到一个checkbox/rediao按钮（最后一个可能是最合适）且所有的input元素应该处于一个父元素之下，比如div元素。这种方式下验证库能够找到所有的checkbox/rediao按钮且放置验证提示在父元素的底部从而使其出现在一组checkbox/radiao按钮的后面。

当验证初始化时，可以通过可选项{stopOnFirst:ture}来实现停止在第一个验证失败的行为。Demo的例子都是默认的。如果设置了，提交表单时第一个验证失败的提示马上就显示了。

<script type="text/javascript">
     new Validation('form-id',{stopOnFirst:true});
</script>

也可以通过可选项{immediate:true}来实现离开一个验证区域时立即进行验证。这发生在表单所有元素的onblur事件上。

在默认情况下验证库给表单的onsubmit事件增加了一个监听器，当验证失败的时候阻止这个事件的进行。如果设置可选项{onSubmit:false}，它就不会阻止了。通过这种方式，可以手动的调用自己的javascrip验证函数。

在默认情况下验证库使出现错误的第一个验证域获取焦点。可以通过可选项{focusOnError:false}使它不这样做。

也可以通过可选项{useTitles:true}来使验证器使用表单元素的title属性作为验证错误的提示信息。

通过可选项{onFormValidate:yourFunction;onElementValidate:yourFunction}来设置回调函数。

onFormValidate在表单验证执行之后被调用，获取两个参数：验证结果（true或者false）和表单的符号。onElementValidate在每个表单元素验证之后被调用，也获取两个参数：验证结果（true或者falsh）和表单元素符号。

可以创建自己的页面验证通知元素来替代验证器的错误信息。当脚本创建提示元素，它首先寻找匹配‘advice-’+validate-class- name+‘-’+element.id的元素，如果找不到则寻找匹配’advice-’+element.id的元素。如果表单元素没有id属性将匹配 name属性。如果它找到元素将使他显示。例如在Demo中看Donation这个域。你制作一个普通的验证通知元素，使它的样式为 display : none。

如果也在也面的头部嵌入来自Scriptaculous的文件effect.js，就可以控制验证通知的显示的渐隐渐显效果。<script src="effects.js" type="text/javascript"></script>
CSS Hooks

和上面的验证CSS类一样，验证库用CSS类来指明验证的状态：validation-failed和validation-passed。

这个验证通知元素有一个validation-advice的类，id属性匹配下面这个规则：‘advice-’+validation-class-name+‘-’element.id

所以如果域birthdate用validation-date验证类，则验证通知元素的id为advice-validation-date-birthday。
Javascript API

默认下Javascript类把一个事件观察器绑定到表单的onsubmit事件。如果你喜欢通过自己的javascript提交表单，你依旧可以像下面这样检验表单：

<script type="text/javascript">
    var valid = new Validation('form-id', {onSubmit:false});
    var result = valid.validate();
</script>

实力方法validate()将返回true或者false。

这个Javascript类有一个实例函数可以reset所有的验证域：

<script type="text/javascript">
    var valid = new Validation('form-id');
    valid.reset();
</script>

注意这不是reset整个表单而是所有的验证域。

validation类也有一些可以用来独立使用的静态方法：Validation.validate([element OR element id] [, options])

这用所有当前的验证类验证域（或id指的域）。也可以通过可选项{useTitle:true}使域验证器使用元素的标题属性值来作为错误通知信息。

可以通过下面的方式运行一个特殊的验证一个域或者域值。Validation.get('validator-name').test(value [, element])

可以像这样来增加自己的验证器：

Validation.add('class-name', 'Error message text', function(value [, element]) {
     return /* do validation here */
});

例如这事一个内置的验证器：

Validation.add('validate-alpha', 'Please use letters only (a-z) in this field.', function (v) {
     return Validation.get('IsEmpty').test(v) ||  /^[a-zA-Z]+$/.test(v)
});

当增加一个新的验证器时，它被通过以CSS类名为关键字加入到一个静态的验证方法组中。必须通过表单元素的class属性来应用自己定制的验证函数.

可以使用Validation.addAllThese() 按照如下的方式比较容易的添加多个验证函数：

Validation.addAllThese([
     ['required', 'This is a required field.', function(v) {
       return !Validation.get('IsEmpty').test(v);
     }],
     ['validate-number', 'Please use numbers only in this field.', function(v) {
       return Validation.get('IsEmpty').test(v) || !isNaN(v);
     }],
     ['validate-digits', 'Please use numbers only in this field.', function(v) {
       return Validation.get('IsEmpty').test(v) ||  !/[^\d]/.test(v);
     }]
]); 

这是通过一个每个元素是有三个元素[className, error, function]的数组的数组。

ajaxcn.org上有一个应用的例子，可以看看http://ajaxcn.org/space/start/2006-05-22/1