正则表达式、字符转义在AngularJS表单验证中的应用

项目中因为修改了验证规则，替换正则表达式后，却并未如预期生效，于是开始填坑……

最初，正则如下：

xmlCopy code
1
ng-pattern="/^[0-9a-zA-Z\u4E00-\uFA29_]*$/i"
ng-pattern="/^[0-9a-zA-Z\u4E00-\uFA29_]*$/i"

即允许数字、大小写英文字母、汉字、下划线。因无特殊字符，一切正常运行。

修改后，期望的规则如下：

xmlCopy code
1
ng-pattern="/^[^\/:*?"<>|]+$/i"
ng-pattern="/^[^\/:*?"<>|]+$/i"

即：不允许以下字符：\/:*?"<>|（windows文件名规则）

依经验，加上转义：

xmlCopy code
1
ng-pattern="/^[^\\\/:\*\?\"<>\|]+$/i"
ng-pattern="/^[^\\\/:\*\?\"<>\|]+$/i"

打开页面，却直接显示错乱，因为包含了特殊字符：<>，浏览器直接解析为标签符号，导致错误关闭。好吧，对<>也进行转义：

xmlCopy code
1
ng-pattern="/^[^\\\/:\*\?\"\<\>\|]+$/i"
ng-pattern="/^[^\\\/:\*\?\"\<\>\|]+$/i"

依旧无效。

于是转而在js中定义RegExp，然后渲染到HTML：

javascriptCopy code
1
$scope.fileReg = /^[^\\\/:\*\?\"<>\|]+$/i;
$scope.fileReg = /^[^\\\/:\*\?\"<>\|]+$/i;

xmlCopy code
1
ng-pattern="{{fileReg}}"
ng-pattern="{{fileReg}}"

查看DOM，显示为：

xmlCopy code
1
ng-pattern="[object Object]"
ng-pattern="[object Object]"

转为字符串形式：

javascriptCopy code
1
$scope.fileReg = '/^[^\\\/:\*\?\"<>\|]+$/i';
$scope.fileReg = '/^[^\\\/:\*\?\"<>\|]+$/i';

显示为：

xmlCopy code
1
ng-pattern="/^[^\/:*?"<>|]+$/i"
ng-pattern="/^[^\/:*?"<>|]+$/i"

继续再增加一次转义：

javascriptCopy code
1
$scope.fileReg = '/^[^\\\\\\/:\\\*\\\?\\\"<>\\\|]+$/i';
$scope.fileReg = '/^[^\\\\\\/:\\\*\\\?\\\"<>\\\|]+$/i';

显示为：

xmlCopy code
1
ng-pattern="/^[^\\\/:\*\?\"<>\|]+$/i"
ng-pattern="/^[^\\\/:\*\?\"<>\|]+$/i"

终于搞定正则的定义，但。。。提示信息同样显示错乱：

xmlCopy code
1
ng-pattern-msg="文件名不能包含下列任何字符：\/:*\"<>|"
ng-pattern-msg="文件名不能包含下列任何字符：\/:*\"<>|"

且转义无效，想到HTML字符实体，于是转而使用&quot;等形式字符，一切正常。但。。。正则匹配错误！联想到上述方式，尝试也用HTML实体修改正则：

xmlCopy code
1
ng-pattern="/^[^\\\/:\*\?"<>\|]+$/i"
ng-pattern="/^[^\\\/:\*\?"<>\|]+$/i"

终于，搞定！

总结：若需要在HTML中引用特殊字符，对其转义时需要使用HTML实体字符，而不是简单地使用反斜杠。