Question

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

使用以下脚本，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>

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验证插件数据

1 个答案: