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;%;&()]+$/"

請記住也要在輸入中使用名稱，因為沒有控件的名稱，表單控制器將無法將屬性與其實例關聯。

工作演示

 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>