具有自定义自动填充功能的Parsley.js电话号码验证

Question

我正在使用Parsley表单验证来处理表单，并且在一切顺利之前遇到了最后一个问题。 这也是我第一次使用欧芹。

我有以下自定义脚本可以自动填充连字符和括号：

<script type="text/javascript">
        $("#inf_field_Phone1").on("change keyup paste", function () {
            var output;
            var input = $("#inf_field_Phone1").val();
            input = input.replace(/[^0-9]/g, '');
            var area = input.substr(0, 3);
            var pre = input.substr(3, 3);
            var tel = input.substr(6, 4);
            if (area.length < 3) {
                    output = "(" + area;
            } else if (area.length == 3 && pre.length < 3) {
                    output = "(" + area + ")" + " " + pre;
            } else if (area.length == 3 && pre.length == 3) {
                    output = "(" + area + ")" + " " + pre + "-" + tel;
            } 
            $("#inf_field_Phone1").val(output);
    });
    </script>

当仔细检查表单字段时，要仔细检查所有文件是否正常，然后进入电话号码字段，第一个括号会自动填充，然后在我提交表单时，Parsley会将其视为有效的电话号码。 这是HTML：

<form accept-charset="UTF-8" id='become-partner-form' method="POST" name='Form'>    
    <div class="col-md-6">
        <input type="tel" class="form-control tc-custom-focus" id="inf_field_Phone1" name="inf_field_Phone1" placeholder="Phone*" data-parsley-trigger='change' data-parsley-required>
</div>

这可能无关紧要，但以防万一，这是将Parsley绑定到表单的js：

<script type="text/javascript">
        $(function () {
            $('#become-partner-form').parsley().on('field:validated', function() {

                var ok = $('.parsley-error').length === 0;
                $('.bs-callout-warning').toggleClass('invisible', ok);

            })
        });
    </script>

请让我知道您是否需要jsfiddle或其他任何帮助（我在这里不多张贴！）关于如何防止在没有完整有效电话号码的情况下提交表单的任何想法？

Answer 1

首先，您可能想使用input事件而不是change （在您的情况下是无用的）， keyup和paste 。

Parsley使用input事件，因此只要您的代码在parsley的代码之前运行（即，如果在Parsley之前绑定自动填充代码），您就可以了。