Question

我有一个表单需要验证美国和英国的电话号码（最好是根据用户从输入旁边的下拉菜单中选择的内容。我有以下表单代码：

<form id="phone">
<div class="col-md-10">
    <div class="modal-header" style="text-align: center;">
         <h5>Get a link on your phone</h5> 
        <div class="input-group">
            <div class="input-group-btn">
                <button id="label" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">+1 <span class="caret"></span>

                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#" id="1">US: +1</a>

                    </li>
                    <li><a href="#" id="44">UK: +44</a>

                    </li>
                </ul>
            </div>
            <input class="form-control phone" id="phone" name="phone" aria-label="..." placeholder="Your phone number" type="text"> <span class="input-group-btn">
              <input class="btn btn-default" type="submit">SUBMIT</button>
              </span>

        </div>
    </div>
</div>

和相应的jQuery：

$('#phone').submit(function (e) {
e.preventDefault();
var phone = $(this).find('.phone').val();

$.ajax({
    url: '/textMessage/' + phone,
    method: "GET",
    success: function () {
        console.log(this);
    }
});

});

$("#1, #44").click(function (e) {
    $("#label").html("+" + $(this).attr("id") + " <span class='caret'></span>");
});
$('.phone').on('input', function (event) {
    this.value = this.value.replace(/[^0-9]/g, '');
});

$("#phone").validate({
    rules: {
        phone: {
            required: true,
            phoneUS: true
        }
    }
});

我无法使验证工作，也不确定如何将其用于英国号码。

Answer 1

这更像你应该做的事情。（请注意ajax()如何属于submitHandler。

$("#phone").validate({
    rules: {
        phone: {
            required: true,
            phoneUS: true  // start with the default
        }
    },
    submitHandler: function (form) {
        $.ajax({
            url: '/textMessage/' + $('input[name="phone"]').val(),
            method: "GET",
            success: function () {
                console.log(form);
            }
        });
        return false;
    }
});

由于两个phoneUS方法相互冲突，因此您无法同时将phoneUK和regex应用于同一字段。美国电话号码在针对phoneUK规则进行评估时无效。

使用{em>动态规则交换.rules('add')和.rules('remove')方法，解决方案必须更加复杂。

var phone = $('input[name="phone"]');

if ($(this).attr("id") == '1') {
    phone.rules('remove', 'phoneUK');
    phone.rules('add', {
        phoneUS: true
    });
} else {
    phone.rules('remove', 'phoneUS');
    phone.rules('add', {
        phoneUK: true
    });
}

（注意，我尝试了＃34;链接＆＃34;减少行数的方法，但插件不允许将.rules()链接到.rules()。）< / em>的

DEMO：http://jsfiddle.net/1a8r5gmv/21/

使用errorPlacement选项放置错误消息，修复损坏的布局。默认情况下，它会立即插入input元素之后。显然，你需要在元素的父div之外。

errorPlacement: function(error, element) { error.insertAfter($(element).parent('div')); },

另外，使用messages选项自定义消息。

messages: { phone: { phoneUS: "enter valid US number", phoneUK: "enter valid UK number" } },

DEMO 2：http://jsfiddle.net/1a8r5gmv/22/

备注：

此处的HTML无效：<input class="btn btn-default" type="submit">SUBMIT</button>

您正在关闭带有<input>标记的</button>代码。

应该......

<button class="btn btn-default" type="submit">SUBMIT</button>

OR

<input class="btn btn-default" type="submit" value="SUBMIT" />

此外，在您的OP（不在jsFiddle中）中，您在id="phone"元素以及<form>元素上使用<input>。您无法复制页面上的任何id。

你不应该这样做......

$(this).find('.phone').val()

class phone可以是多个元素，因此当您想要获取一个元素的值时，不应将.val()附加到一组元素。此外，当在submitHandler内部移动时，$(this)对象变得毫无意义。只需直接获取该字段的值即可。

$('input[name="phone"]').val()

jQuery Validate插件不适用于电话号码

1 个答案: