javascript - 电话号码验证 Angularjs

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>

我如何使用输入html标签实现上述验证条件

Answer 1

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

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

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