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

Angular JS - string patterns with custom validation rules

本文关键字：规则 字符串 模式 验证 自定义 JS Angular      更新时间：2023-09-26

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

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

谢谢。

它应该按预期工作，但是您的模式将被浏览器破坏，因为由于模式中存在"，您的模式文本将被提前终止，并且值也包含在"中。因此，将模式包装在单引号或转义引号中，并在属性值中带有&quot;（当浏览器呈现时，它将自动取消转义）。

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

或

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

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

工作演示

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>

相关文章：