带有双引号的正则表达式的 ng-pattern 无法正确转义
ng-pattern with regex having double quotes does not escape correctly
我对 ^[^\./:*\?\"<>\|]{1}[^\/:*\?\"<>\| 的正则表达式进行了 ng 模式验证]{0,254}$ 基本上测试文件路径和限制中的无效字符。但是当我将 ng-pattern 指定为
ng-pattern = "^[^\\./:\*\?\"<>\|]{1}[^\/:\*\?\"<>\|]{0,254}$"
,ng 模式以不正确的方式显示正则表达式。对正确实现此目标的任何帮助
首先,您的正则表达式包含太多转义符号,而您只需要转义此处的"
和\
。
然后,要匹配 ng-pattern
属性中的 "
,您可以将其定义为 \x22
或 "
:
var app = angular.module("app", []);
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<form name="form">
<p>Enter text to validate:</p>
<input type="text" ng-model="name" name="name" ng-pattern="/^[^\\./:*?"<>|][^\\/:*?\x22<>|]{0,254}$/" ng-trim="false" />
<div ng-show="form.name.$error.pattern">Text doesn't match with ng-pattern!</div>
</form>
</body>
</html>
您也可以通过在控制器中使用 常规字符串文字 定义正则表达式来解决问题,您可以在其中使用 '.."..'
或 "..\"..."
,并且然后在 ng-pattern
属性中使用 {{...}}
内的变量名。请注意,要匹配文字 \
,您需要在正则表达式模式中使用 4 个反斜杠。
var app = angular.module("app",[]);
app.controller("FormCtrl", function($scope) {
$scope.regex = "/^[^\\./:*?\"<>|][^\\/:*?\"<>|]{0,254}$/";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<form name="theForm" ng-controller="FormCtrl" novalidate>
<input type="text" name="filename" placholder="filename" ng-model="filename" ng-pattern="{{regex}}" required />
<div class="error"
ng-show="(theForm.filename.$dirty || attempted) && theForm.filename.$invalid">
<small class="error text-danger"
ng-show="theForm.filename.$error.required">
Please enter a file name.
</small>
<small class="error text-danger"
ng-show="theForm.filename.$error.pattern">
Please enter a valid file name.
</small>
</div>
</form>
</div>
我试图在与上述问题类似的 ng 模式中排除 ' 和 "。我找到了一种无需使用范围变量即可直接嵌入 ' 或 " 的方法:
<input type="text" ng-pattern="/^[^"']+$/" />
可以使用\"
转义"
。
我对 ^[^\./:*\?\"<>\|]{1}[^\/:*\?\"<>\| 的正则表达式进行了 ng 模式验证]{0,254}$ 基本上测试文件路径和限制中的无效字符。但是当我将 ng-pattern 指定为
ng-pattern = "^[^\\./:\*\?\"<>\|]{1}[^\/:\*\?\"<>\|]{0,254}$"
,ng 模式以不正确的方式显示正则表达式。对正确实现此目标的任何帮助
首先,您的正则表达式包含太多转义符号,而您只需要转义此处的"
和\
。
然后,要匹配 ng-pattern
属性中的 "
,您可以将其定义为 \x22
或 "
:
var app = angular.module("app", []);
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<form name="form">
<p>Enter text to validate:</p>
<input type="text" ng-model="name" name="name" ng-pattern="/^[^\\./:*?"<>|][^\\/:*?\x22<>|]{0,254}$/" ng-trim="false" />
<div ng-show="form.name.$error.pattern">Text doesn't match with ng-pattern!</div>
</form>
</body>
</html>
您也可以通过在控制器中使用 常规字符串文字 定义正则表达式来解决问题,您可以在其中使用 '.."..'
或 "..\"..."
,并且然后在 ng-pattern
属性中使用 {{...}}
内的变量名。请注意,要匹配文字 \
,您需要在正则表达式模式中使用 4 个反斜杠。
var app = angular.module("app",[]);
app.controller("FormCtrl", function($scope) {
$scope.regex = "/^[^\\./:*?\"<>|][^\\/:*?\"<>|]{0,254}$/";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<form name="theForm" ng-controller="FormCtrl" novalidate>
<input type="text" name="filename" placholder="filename" ng-model="filename" ng-pattern="{{regex}}" required />
<div class="error"
ng-show="(theForm.filename.$dirty || attempted) && theForm.filename.$invalid">
<small class="error text-danger"
ng-show="theForm.filename.$error.required">
Please enter a file name.
</small>
<small class="error text-danger"
ng-show="theForm.filename.$error.pattern">
Please enter a valid file name.
</small>
</div>
</form>
</div>
我试图在与上述问题类似的 ng 模式中排除 ' 和 "。我找到了一种无需使用范围变量即可直接嵌入 ' 或 " 的方法:
<input type="text" ng-pattern="/^[^"']+$/" />
可以使用\"
转义"
。