电话号码验证角

Question

我在验证电话号码时遇到了问题。电话号码是一个10位数的字符串，应该填充在三个输入字段中第一个输入字段--仅有3位数（要求，只能接受数字和最大长度3）第二个输入字段--仅有3位数（要求，只能接受数字和最大长度3）第三个输入字段--仅有4位数（要求，只能接受数字和最大长度4）

<label for="phoneone" aria-label="Enter First 3 digits of your phone no."><input id="phoneone" type="number" required name="phoneone" class="phone-text-box" ng-model="user.phoneNumbercodeone"  ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"></input></label>
                        <label for="phonetwo" aria-label="Enter second 3 digits of your phone no."><input id="phonetwo" type="number" required  name="phonetwo" class="phone-text-box" ng-model="user.phoneNumbercodetwo" ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"></input></label>
                        <label for="phonethree" aria-label="Enter last 4 digits of your phone no."><input id="phonethree" type="number" required  name="phonethree" class="phone-text-box" ng-model="user.phoneNumbercodethree" ng-minlength="4" ng-maxlength="4" maxlength="4" ng-pattern="/^[0-9]*$/"></input></label>
                        <div class="clearfix" ></div>

Answer 1

您应该使用输入模式验证。这可以使用ng-pattern指令来完成：

如果ngModel值与通过计算属性值中给出的角度表达式找到的正则表达式不匹配，NgPattern将设置模式验证错误键。如果表达式的计算结果是RegExp对象，则直接使用它。如果表达式的计算结果是字符串，那么在用^和$字符包装后，它将被转换为正则表达式。例如，“abc”将被转换为新的正则表达式('^abc$')。

注意：避免在RegExp上使用g标志，因为它会导致每次连续搜索都从上次搜索匹配的索引处开始，从而不会考虑整个输入值。