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

Sanitize jQuery validation plugin data prior to validation

本文关键字：验证 jQuery 插件 数据      更新时间：2023-09-26

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

使用下面的脚本，由于没有给出协议，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>

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

  1. 创建两个输入字段…

    • 一个可见的用户(没有验证)
    • 一个隐藏用于验证。

  2. 在输入任何数据到可见字段时，您可以通过编程将数据复制并根据需要修改到隐藏字段。

  3. 然后以编程方式触发对隐藏字段的验证

就像这样。

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

:

  • 你必须通过正确设置ignore选项来启用隐藏字段的验证。[]将启用对所有隐藏字段的验证

  • 您可能必须使用errorPlacement选项来调整这个隐藏字段的错误消息的位置。

相关文章：