Question

我有一个Angular JS项目。在它基于bootstrap标记实现的形式（只有css，没有js）。在表格中有一个我需要实现验证的电话领域。

验证规则：

手机必须只包含数字，空格和＆amp; ＆＃34; +＆＃34;字符
手机必须至少有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>

问题如下：

当我输入数字时，它不适合min＆amp;最大数量。我总是有错误：＆＃34;电话号码至少需要11个字符＆＃34;
不知道如何绑定正则表达式。因为已经实现了3种类型的验证，我可以打印：+1234 56789 - 这里是11个字符。也许我需要改变smth，但我不知道是什么。

有人帮帮我吗？

Answer 1

您需要添加ng-class="{'has-error'}"
PLUNKER：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>

Angular JS中的验证问题

1 个答案: