Javascript验证 - 与服务器同步

时间:2010-12-20 03:14:39

标签: javascript validation client

为了DRY的利益,是否有框架/库/设计模式用于在一个地方指定验证规则,并在客户端和服务器端评估验证规则?这似乎是一个明显的要求,但我没有遇到类似的事情。

澄清一下:我对使用所需的javascript生成表单以验证它的服务器端代码不感兴趣 - 我希望验证规则与客户端和服务器端实现分离,例如,通过基于Web的API请求验证规则。

有什么类似的吗?

2 个答案:

答案 0 :(得分:1)

有趣的问题。我想我会设置一个带静态字段的类来存储所有规则。

它需要一个函数来直接验证输入或返回在服务器端使用的验证器函数,另一个函数需要由ajax访问以获取将在javascript中使用eval进行测试的规则列表。

Theres没有理由$rulesPHPrulesJS必须相同。事实上,我并没有真正意识到在每一端验证相同的事情 - 你可能想要验证不同的东西。

class Validation
{

    protected static $rulesPHP = 
                       array( 
                             'positiveInteger' => array('($x === int($x))', '($x > 0)'),
                             'alphanumericString' => array(....)
                            );

    protected static $rulesJS = 
                       array(
                             'positiveInteger' => array('(x === int(x))', '(x > 0)'),
                             'alphanumericString' =>array(..... )
                            );       

    public static getValidatorPHP($type)
    {
         if (!isset($rulesPHP[$type])) return false;
         $exp = explode(' && ', self::$rulesPHP[$type]);

         return function($x) use ($exp)
         {
              return eval($exp);
         };
    }

    public static getJsRules($type)
    {
         if (!isset($rulesJS[$type])) return false;
         $exp = explode(' && ', self::$rulesJS[$type]);

         return $exp;
    }

}

在另一个文件中使用:

  $posIntValidator = Validation::getValidatorPHP('positiveInteger');
  $posIntValidator($_POST['text1']);

Ajax with ruleaccessor.php:

    $t = $_GET['type'];
    $out = Validation::getJsRules($t);
    echo $out;

的javascript:

   function getValidator(type)
   {
       var rules;
       $.get('/ruleaccessor.php?type=' + type, function(in) {rules = in;});
       return function(x){return eval(rules);};
   }

   validatePosInt = getValidator('positiveInteger');
   validatePosInt($('#text1').val());

当然,您必须决定如何处理未验证的内容。如果您希望针对不同的验证错误使用不同的消息,则必须将消息与每个规则一起存储,并且不能简单地将它们一起爆炸。

这远非一个发达的想法,但希望通用设计可以让你到处。

答案 1 :(得分:1)

好问题!

我做了一些MVC验证,从数据库定义中获取规则。根据这些经验,我将创建一个处理程序,它接受列规范字符串“namespace.table.column”并返回一组要验证的规则,最好是在JSON中。然后使用css类来表示将被验证的输入元素(1)并使用JQuery在所有“.validate”元素上设置验证事件,并将验证对象传递给该函数。

请注意,使用这种方法,您必须对规则进行一些服务器端呈现,而不必在javascript中公开您的数据库结构!

(1): <input type="text" id="name" class="validate" />

验证对象:

或许从一些基本类型检查开始,继续进行大小检查?

JSON structure: validationObject = 
{
    type: 'integer',
    length: '4',
    min: '0',
    max: '10000'
}

function validate(input) {

    var validation = getValidationObject(); // Ajax call

    // perform type check

    // perform length check

    // perform min/max/disallowed content checks

}

没有详细说明,但在这方面有所作为。