在验证之前清理 jQuery 验证插件数据答案

【问题标题】：Sanitize jQuery validation plugin data prior to validation在验证之前清理 jQuery 验证插件数据
【发布时间】：2015-06-08 14:53:08
【问题描述】：

是的，我知道数据清理和验证必须在服务器端完成，但请留在我身边。

使用以下脚本，stackoverflow.com 将无法通过验证，因为没有给出协议。如果在没有协议的情况下输入 URL，我希望在客户端验证之前将默认协议 (http://) 添加到输入值。我不希望放松验证方法以静默接受没有协议的 URL，因为用户应该知道添加了协议。

如何做到最好？

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            $(function(){
                var validator=$("#myForm").validate({
                    rules: {
                        url: {url:true,}
                    },
                });

                //Added per Monax's suggestion.
                $('#url').blur(function(){this.value=this.value.substring(0,4)=='http'?this.value:(this.value?'http://'+this.value:'');});;
            });
        </script>
    </head>

    <body>
        <form id="myForm" method="post">
            <input name="url" id="url" value="">
            <input type="submit" />
        </form>
        <?php echo('<pre>'.print_r($_POST,1).'</pre>');?>
    </body> 
</html>

【问题讨论】：

url 规则按设计工作。如果您希望规则以不同的方式工作，则必须编写自己的规则。但是，如果您不想“放松”规则以接受您坚持提供给它的数据，那么就不确定您期望什么。
验证何时执行？提交？您可以在 blur 上编写一个函数来检查协议。尽管如此，我认为你不应该试图将用户推入协议，如果你知道问题，并且很容易以编程方式解决，为什么要打扰用户呢？（只是一个想法）
@Sparky 我同意url 规则按设计工作，我不想更改它。在提交之前，我希望更新输入值。
由于 jQuery Validate 插件处理捕获提交的点击和其他触发事件，这不是一项简单的任务。我唯一的建议是设置两个字段，一个是未验证的可见字段，一个是经过验证的隐藏字段。您将复制和操作数据并以编程方式触发验证。
“它会在第一次通过时验证为错误，但之后会通过。” ~ 那是不是标准（或预期）这个插件的行为。

标签： javascript jquery jquery-validate

【解决方案1】：

您不想编写自定义规则，并且坚持在验证之前操作数据。您的选择有限，因为插件会自动捕获所有验证触发事件。这是我建议的解决方法。

创建两个输入字段...
- 用户可见（无验证）
- 为验证而隐藏。（但会显示验证消息）
在可见字段中输入任何数据后，您可以根据需要以编程方式将数据复制并修改到隐藏字段中。
然后以编程方式触发对隐藏字段的验证。

类似的东西。

HTML：

<input type="text" id="url" />
<input type="hidden" name="url" />

jQuery:

$('#url').on('blur keyup', function() {
    var myurl = $(this).val(); // entered value

    // manipulate and sanitize the value as desired

    $('[name="url"]').val() = newvalue; // copy the new value into the hidden field.
    $('[name="url"]').valid(); // trigger validation on the hidden field
});

注意事项：

您必须通过将the ignore option 正确设置为允许的值来启用对隐藏字段的验证。 [] 将启用对所有隐藏字段的验证。
您可能必须使用 the errorPlacement option 来调整此隐藏字段的错误消息的位置。您可以有条件地执行此操作。

【讨论】：