项目中因为修改了验证规则,替换正则表达式后,却并未如预期生效,于是开始填坑……
最初,正则如下:
- 1
ng-pattern="/^[0-9a-zA-Z\u4E00-\uFA29_]*$/i"
即允许数字、大小写英文字母、汉字、下划线。因无特殊字符,一切正常运行。
修改后,期望的规则如下:
- 1
ng-pattern="/^[^\/:*?"<>|]+$/i"
即:不允许以下字符:\/:*?"<>|(windows文件名规则)
依经验,加上转义:
- 1
ng-pattern="/^[^\\\/:\*\?\"<>\|]+$/i"
打开页面,却直接显示错乱,因为包含了特殊字符:<>,浏览器直接解析为标签符号,导致错误关闭。好吧,对<>也进行转义:
- 1
ng-pattern="/^[^\\\/:\*\?\"\<\>\|]+$/i"
依旧无效。
于是转而在js中定义RegExp,然后渲染到HTML:
- 1
$scope.fileReg = /^[^\\\/:\*\?\"<>\|]+$/i;
- 1
ng-pattern="{{fileReg}}"
查看DOM,显示为:
- 1
ng-pattern="[object Object]"
转为字符串形式:
- 1
$scope.fileReg = '/^[^\\\/:\*\?\"<>\|]+$/i';
显示为:
- 1
ng-pattern="/^[^\/:*?"<>|]+$/i"
继续再增加一次转义:
- 1
$scope.fileReg = '/^[^\\\\\\/:\\\*\\\?\\\"<>\\\|]+$/i';
显示为:
- 1
ng-pattern="/^[^\\\/:\*\?\"<>\|]+$/i"
终于搞定正则的定义,但。。。提示信息同样显示错乱:
- 1
ng-pattern-msg="文件名不能包含下列任何字符:\/:*\"<>|"
且转义无效,想到HTML字符实体,于是转而使用"等形式字符,一切正常。但。。。正则匹配错误!联想到上述方式,尝试也用HTML实体修改正则:
- 1
ng-pattern="/^[^\\\/:\*\?"<>\|]+$/i"
终于,搞定!
总结:若需要在HTML中引用特殊字符,对其转义时需要使用HTML实体字符,而不是简单地使用反斜杠。