如何使用 ngPattern 验证包含受限字符的输入？答案

【问题标题】：How to use ngPattern to validate an input containing restricted characters?如何使用 ngPattern 验证包含受限字符的输入？
【发布时间】：2016-07-26 18:45:01
【问题描述】：

我尝试验证受限字符的输入。输入字段只接受字母、破折号和下划线字符。

当我测试下面的代码时，第一个字符被接受，但第二个字符引发模式错误。

我的正则表达式：/^[a-zA-Z_-]$/

HTML 代码：

<input ng-model="inputText" name="inputText" required md-maxlength="{{options.maxTextLength}}" md-autofocus ng-keypress="keypress($event)" ng-change="textChanged()" ng-pattern='/^[a-zA-Z_-]$/'>
<div ng-messages="inputTextForm.inputText.$error">
    <div ng-message="required">Input is required.</div>
    <div ng-message="md-maxlength">Input has reached the maximum characters allowed.</div>
    <div ng-message="pattern">Invalid characters.</div>
</div>

此代码位于 Angular 材质对话框 (v1.0.9) 中

【问题讨论】：

标签： angularjs ng-pattern angularjs-ng-pattern

【解决方案1】：

对于多个字符，您需要在模式末尾添加*，即：

<input ... ng-pattern="/^[a-zA-Z_-]*$/" />
<!--                               ^   -->
<!--                               |   -->
<!--             HERE -------------+   -->

见小提琴：https://jsfiddle.net/5wa5478c/

【讨论】：

我有一个问题，也许你可以回答。这个 ng 模式需要是动态的，并由控制器根据上下文设置。如果我尝试绑定这个正则表达式，它就不起作用。如果我删除斜线，它可以工作......
你可以这样做：<input ... ng-pattern="pattern" />，其中pattern被控制器放置在范围内。见jsfiddle.net/xsvpmp6c

【解决方案2】：

这样，此正则表达式表示有效输入是行首 (^)，后跟一个批准的字符，然后是行尾 ($)。

删除 ^ 和 $，它应该可以工作！

ng-pattern='/[a-zA-Z_-]/'

首先在此处测试您的代码：http://rubular.com/

【讨论】：

是的，我已经在另一个 RegEx 网站上在线测试过它，但是在我的 Angular 代码中，无论我输入的第二个字符（有效与否！），它都会引发模式错误。
删除 ^ 和 $ 如上所述，它应该可以工作。您的代码原样不适用于 rubular，但适用于此修复程序。
我已经删除了这些字符，现在它允许一切（它只适用于第一个字符）