当前位置: 首页 → 爱前端 → 

JavaScript

关于AngularJS的表单验证问题

 

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

最初,正则如下:

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

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

修改后,期望的规则如下:

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

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

依经验,加上转义:

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

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

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

依旧无效。

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

$scope.fileReg = /^[^\\\/:\*\?\"<>\|]+$/i;
ng-pattern="{{fileReg}}"

查看DOM,显示为:

ng-pattern="[object Object]"

转为字符串形式:

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

显示为:

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

继续再增加一次转义:

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

显示为:

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

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

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

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

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

终于,搞定!

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

🔚
 

*

*

*

*