电话号码验证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 表达式找到的 RegExp 不匹配，NgPattern 设置模式验证错误键。如果表达式的计算结果为 RegExp 对象，则直接使用 this。如果表达式的计算结果为字符串，则在将其包装为 ^ 和 $ 字符后，它将被转换为正则表达式。例如，"abc" 将被转换为 new RegExp('^abc$')。

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

Answer 2

您的代码存在一些小问题。具体来说，我正在查看ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"。您可以在输入中使用min 和max 的html5 属性来实现您的号码验证。所以你的输入看起来像这样：

<input id="phoneone" type="number" name="phoneone" class="phone-text-box" ng-model="user.phoneNumbercodeone" ng-minlength="3" ng-maxlength="3" min="100" max="999" />

然后您可以使用类似这样的方式对其进行验证：

<div ng-show="phoneForm.phoneone.$invalid && phoneForm.phoneone.$dirty">
    <div ng-show="phoneForm.phoneone.$error.minlength || phoneForm.phoneone.$error.maxlength">This must be a 3 digit number</div>
</div>

当然，将 phoneForm 替换为您的表单名称。