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

最初，正则如下：

  • 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字符实体，于是转而使用&quot;等形式字符，一切正常。但。。。正则匹配错误！联想到上述方式，尝试也用HTML实体修改正则：

  • 1
ng-pattern="/^[^\\\/:\*\?&quot;&lt;&gt;\|]+$/i"

终于，搞定！

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