在验证之前对jQuery验证插件数据进行消毒

debugcn 发表于 Dev

用户名

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

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>

活泼的

您不想编写自定义规则，而是坚持在验证之前操纵数据。由于插件会自动捕获所有验证触发事件，因此您的选择受到限制。这是我建议的解决方法。

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

这样的事情。

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
});

注意事项：