Question

我尝试验证文本字段电话号码，以便输入符合以下模式：05x-xxxxxxx（忽略连字符）。这是正确的做法吗？

HTML：

<form name="PhoneForm">
    <div>
        <md-icon md-svg-src="icons/ic_phone_48px.svg"></md-icon>
        <md-input-container>
            <label>Phone Number</label>
            <input ng-model="contactPhone" name="PhoneInput" required ng-pattern="[0][5][0-9]{8}"/> <!-- i.e 05x-xxxxxxx -->
            <div ng-messages="PhoneForm.PhoneInput.$error" ng-if="PhoneForm.PhoneInput.$dirty">
                <div ng-message="required">This field is required!</div>
                <div ng-message="pattern">Illegal phone number!</div>
            </div>
        </md-input-container>
    </div>
</form>

因为这似乎不起作用。我甚至没有得到＆＃34;字段是必需的＆＃34;输入为空时的消息。这种模式可能有问题吗？

谢谢。

Answer 1

如果不需要，请从输入标记中删除required属性。

Answer 2

看起来像REGEX的问题。我建议放入REGEX开始/结束表达式（^和$）并用/包装表达式。在下面的plunker /^[0][5][0-9]{8}$/中，您可以使用ng-pattern。

Plunk基于文档https://docs.angularjs.org/api/ng/directive/ngPattern

中的内容

https://embed.plnkr.co/BsJXjqIE1TwzT7OPFvNA/

验证AngularJS中的电话号码

2 个答案: