Angular JS 中的验证问题

Question

我有一个 Angular JS 项目。它实现了基于引导标记的形式（只有 css，没有 js）。在表单中有一个电话字段，我需要对其进行验证。

验证规则：

1. 电话只能包含数字、空格和“+”字符

2. 电话必须至少有 11 个号码，最多 15 个号码

这是代码（为了验证，我不使用任何 js 脚本，只使用角度标记）：

<div class="row">
     <div class="col-sm-12">
          <input id="Text5"
                 name="telephone"
                 placeholder="Enter phone number (only digits or spaces)"
                 type="text"
                 ng-model="ManageDetailsCtrl.ManageDetails.Phone"
                 class="form-control"
                 style="width: 100%;"
                 ng-minlength=11
                 ng-maxlength=15
                 ng-pattern="^\+*\d{11,15}$"
                 required>
      </div>
</div>


<div class="error" ng-show="form.telephone.$dirty && form.telephone.$invalid">
     <div class="error" ng-show="form.telephone.$error.required">
          Phone number is required.
     </div>
     <div class="error" ng-show="form.telephone.$error.minlength">
          Phone number ruquired to be at least 11 characters
     </div>
     <div class="error" ng-show="form.telephone.$error.maxlength">
          Phone number cannot be longer than 15 characters
     </div>
</div>

问题如下：

1. 当我输入数字时，它不会影响最小和最大数字。我总是遇到错误：“电话号码至少需要 11 个字符”

2. 不知道如何绑定正则表达式。因为理论上已经实现了 3 种类型的验证，我可以打印：+1234 56789 - 这里有 11 个字符。也许我需要改变什么，但我不知道。

有人帮我吗？

Answer 1

您需要添加ng-class="{'has-error'}"
柱塞：HERE
示例：

<div class="form-group" ng-class="{'has-error': form.telephone.$dirty && form.telephone.$invalid}">
        <input id="Text5"
               name="telephone"
               placeholder="Enter phone number (only digits or spaces)"
               type="text"
               ng-model="ManageDetailsCtrl.ManageDetails.Phone"
               class="form-control"
               style="width: 100%;"
               ng-minlength=11
               ng-maxlength=15
               //ng-pattern="^\+*\d{11,15}$"
               required>
    <div ng-show="form.telephone.$dirty && form.telephone.$invalid">
        <span ng-show="form.telephone.$error.required" class="help-block">can't be blank</span>
        <span ng-show="form.telephone.$error.minlength" class="help-block"> is too short (min 11 characters)</span>
        <span ng-show="form.telephone.$error.maxlength" class="help-block"> is too long (max 15 characters)</span>
    </div>
    </div>