Question

我正在创建自己的MVC框架，我正在考虑一种方法来做“自动”客户端验证控制器。

在其他功能中，我的表单，元素和验证器是像这样一起工作的对象（在表单对象中）：

$this->addElement('text', 'myInput');
$this->elements['myInput']->addValidators(array
    'length' => array('min' => 5, 'max' => 10),
    'number' => array('decimals' => 0)
));

在上面的例子中，根据我添加的验证器，我创建了一个名为'myInput'的文本输入，其值为：

必须>＆gt; =超过5个字符
必须<= 10个字符
必须是数字
必须没有小数（仅限int）

当我收到表单提交并调用验证函数时，一切都在服务器端运行良好。然而，困扰我的是必须手动重做客户端验证。我不喜欢复制相同的功能，所以我想出了一种从已经存在的PHP表单对象创建客户端验证的方法。

归结为JS验证器函数具有与PHP验证器相同的功能，并在元素上调用getClientValidatiors（）函数，以在附加JS事件的正文中创建适当的<script>。

注意：请忽略JS错误，我把它写成一个概念，并没有测试任何东西。

JS验证器函数的工作原理如下：

function lengthValidator(options, value, id){
    //Validate according to the options. Return true if valid or false otherwise as well as calling printError function with the message and the id
}

function numberValidator(options, value, id){
    //Validate according to the options. Return true if valid or false otherwise as well as calling printError function with the message and the id
}

function printError(error, id){
    //Might add more functionality later
    document.getElementById(id).innerHTML = error;
}

例如，这就是视图中的样子：

<?php echo $this->form->elements['myInput]; //The HTML ?>
<?php echo $this->form->elements['myInput]->getClientValidators(); //The JS ?>

在表单提交之前，结果如下：

<input type="text" name="myInput" id="myInput"/>
<span class="error" id="myInput-error"></span>

<script>
document.getElementById('myInput').addEventListener('blur', function(e){
    var value = e.value;
    var id = e.id + '-error';

    if(lengthValidator({min:5, max:10}, value, id) != true){
        return;
    }
    if(numberValidator({decimals:0}, value, id)  != true){
        return;
    }
});
</script>

我正在寻找一个赞成或建议如何使用另一种技术。如果您有任何想法，我想听听他们的意见！

Answer 1

考虑以可以在JavaScript和PHP中自动验证的方式编写验证规范。

$input_schema = array(
    "foo" => array(
        "type" => "number",
        "decimals" => 0,
        "length" => array(
            "min" => 5,
            "max' => 10
        )
    )
);

然后在JS中你可以这样做：

var input_schema = <?php echo json_encode($input_schema);?>;
function validate_input(form_values) {
    for (var key in input_schema) {
        validate_property(input_schema[key], form_values[key]);
    }
}

function validate_property(schema_property, value) {
    if (schema_property.type === "number") {
        validate_number(schema_property, value); // etc
    }
}

您可以在PHP中进行类似的实现。

概念 - 从PHP对象

1 个答案: