Tuesday, 4 November 2008

Hack on FormCheck : Self-defining Validation with Multiple Elements

前面定义了FormCheck自定义函数接口,接口本身还是比较简单的。相对的,反而是在书写自定义validate函数的时候,还需要注意一些细节上的问题。

以我目前进行的项目为例,需要对同一行的三个text box,进行“数据和”的检验。把三个text box里的数相加,看它们的“和”,是否等于100。

HTML的Code:

   1: <td><input type="text" name="r2c1" class="validate['required','digit','~sum100']" /></td>
   2: <td><input type="text" name="r2c2" class="validate['required','digit']" /></td>
   3: <td><input type="text" name="r2c3" class="validate['required','digit']" /></td>

这里的自定义validate函数为 sum100,相应的JavaScript Code:

  1:   var infoCheck = null;
  2:   ...
  3:   infoCheck = new FormCheck('infoForm');
  4:   ...
  5:   function sum100(el) {
  6:     var asscItems = $$('input[name^=r2]');
  7:     var elStatus = true;
  8:     var elValue = Number(el.value);
  9: 
 10:     asscItems.each( function(ael) {
 11:       if( ael != el) {
 12:         var aelStatus = infoCheck.validate(oel);
 13:         elStatus &= aelStatus;
 14:         if( aelStatus ) {
 15:           elValue += Number(ael.value);
 16:         }
 17:       }
 18:     } );
 19: 
 20:     if( !elStatus || (elStatus && elValue == 100) ) {
 21:       return true;
 22:     }
 23:     else {
 24:       el.errors.push("Sum of inputs is not 100.");
 25:       return false;
 26:     }
 27:   }

需要注意的地方:

  • 涉及到的多个INPUT元素,都应该纳入FormCheck的validation范围中;
  • 需要实例化FormCheck给一个全局变量;
  • 在自定义validate函数中,可以使用FormCheck变量,对相关的其它元素进行验证;
  • 使用其它INPUT元素数据的时候,应首先对其进行验证,确保数据有效;
  • 特别注意,不要在自定义validate函数中,对本元素自身再次validate,避免出现validate的递归调用;
  • 多个INPUT元素的联合验证,自定义validate函数只设定在一个元素上面。不能在多个元素上设立相同的联合验证。原因同上。

使用~myvalidate这种形式的自定义validate函数,Form Validation感觉显得比较有层次,使得针对输入的普通验证,同涉及到多元素的逻辑性验证,相对分离开来。这是最初Hack FormCheck的主要原因之一。

0 Comments:

Post a Comment

<< Home