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

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="/^[^%\[\]<>&quot;%;&()]+$/"

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

工作演示

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

<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>