Question

假设我有一个指定预先存在的验证器的输入

ng-pattern="stringValidator"

我希望在不创建全新模式的情况下扩展或自定义此模式，是否可以进行内联？换句话说，我可以直接将验证正则表达式输入标签声明或类似的东西吗？

当前标签声明：

在此代码域外部定义的“stringValidator”模式实现了我需要覆盖的不合需要的规则。我无法编辑“stringValidator”，也无法将自定义规则添加到与“stringValidator”相同的代码文件中。

<input type="text" id="txt-foo" placeholder="" name=""
               class="form-control"
               ng-model="txtName" ng-maxlength="255"
               ng-pattern="stringValidator"
               autocomplete="off" />

我想做这样的事情：

<input type="text" id="txt-foo" placeholder="" name=""
               class="form-control"
               ng-model="txtName" ng-maxlength="255"
               ng-pattern="/^[^%\[\]<>"%;&()]+$/"
               autocomplete="off" />

感谢。

Answer 1

它应该按预期工作，但是您的模式将被浏览器破坏，因为模式中的"会因模式中存在"而过早终止模式文字，并且值包含在"中同样。因此，使用属性值中的ng-pattern='/^[^%\[\]<>"%;&()]+$/'将模式包装在单引号或转义引号中（当浏览器呈现时，它将自动取消转义）。

即ng-pattern="/^[^%\[\]<>"%;&()]+$/"

或者

input.ng-invalid {
  border-width: 2px 5px 2px 2px;
  border-style: solid;
  border-color: red;
}

请记住也要为输入使用name，因为没有控件的名称，表单控制器将无法将属性与其实例关联。

工作演示

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <form name="form">
    <input type="text" id="txt-foo" placeholder=""  class="form-control" ng-model="txtName" ng-maxlength="255" ng-pattern="/^[^%\[\]<>&quot;%;&()]+$/" autocomplete="off" />
  </form>

</div>

＆＃13;

{{1}}

＆＃13;

Angular JS - 具有自定义验证规则的字符串模式

1 个答案: