javascript - PhoneAttribute 的 MVC 客户端验证

Question

我有一个模型:

public class MyModel{
    [Phone]
    public string MyTel { get; set; }
}

在 View 中:

@model MyModel
@Html.EditorFor(x => x.MyTel)

生成的 HTML:

<input type="tel" value="" name="MyTel" id="MyTel" data-val-phone="The MyTel field is not a valid phone number." data-val="true" class="text-box single-line"/>

MyTel 字段的客户端验证不起作用。如何实现？

Answer 1

文章指导Adding Client-Side Validation Support for PhoneAttribute or Fighting the Lookbehind in JavaScript

function initPhoneValidator() {
    $.validator.addMethod("phone", function (value, element) {
        if (this.optional(element)) {
            return true;
        }
        var reverseValue = $.trim(value).split("").reverse().join("");
        var reverseRegEx = new RegExp("^(\\d+\\s?(x|\\.txe?)\\s?)?((\\)(\\d+[\\s\\-\\.]?)?\\d+\\(|\\d+)[\\s\\-\\.]?)*(\\)([\\s\\-\\.]?\\d+)?\\d+\\+?\\((?!\\+.*)|\\d+)(\\s?\\+)?$", "i");
        var match = reverseRegEx.exec(reverseValue);
        return (match && (match.index === 0) && (match[0].length === value.length));
    });
    $.validator.unobtrusive.adapters.addBool("phone");
}