Question

为什么名字文本框中的ng-pattern允许使用特殊字符？这是视图文件：

<div ng-repeat="s in config.students">
    <div class="form-group">
        <label class="control-label col-lg-2"></label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="students[]" ng-trim="false" ng-model="class.students[$index]" required ng-pattern="/^[a-zA-Z]*$/">
        </div>
        <div class="col-md-5">
            <button class="btn btn-danger btn-sm" ng-click="removeStudent($index)" type="button">X</button>
        </div>
    </div>
</div>

<div class="form-group">
    <label class="control-label col-lg-2"></label>
    <div class="col-lg-4">
        <button type="submit" class="btn btn-primary btn-grad btn-rect">Submit</button>
        <a href ="<?php echo base_url();?>index.php/main/index" class="btn btn-default btn-grad btn-rect">Cancel</a>
    </div>
</div>

Answer 1

仅

ng-pattern不会阻止用户将某些文本输入文本框。如果您想这样做，则需要在<input>上使用自定义属性指令。

ng-pattern旨在与AngularJS的表单验证结合使用，您可以使用它来隐藏/显示验证消息并在提交表单之前对其进行验证。

Answer 2

AngularJS表单验证需要表单中每个输入字段的唯一名称。

但是在你的情况下，你对ng-repeat中的所有输入字段使用相同的名称。因此，使用$ index

更改输入以在每次迭代中为输入添加唯一名称

<input type="text" class="form-control" name="students{{$index}}" ng-trim="false" ng-model="class.students[$index]" required ng-pattern="/^[a-zA-Z]*$/">

这是 Plunker 。

如何在文本框中验证angularjs？

2 个答案: