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

Question

是的，我知道数据清理和验证必须在服务器端完成，但请耐心等待。

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

如何做到最好？

<!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>

Answer 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 来调整此隐藏字段的错误消息的位置。您可以有条件地执行此操作。

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

Sanitize jQuery validation plugin data prior to validation

javascript

jquery

jquery-validate