Liferay中自定义<aui:validator>实现非UTF-8输入错误提示的方法

原代码问题分析 #

• 正则定义错误：将正则字面量包裹在引号中变成了字符串类型，调用test方法会直接抛出类型错误，无法执行校验逻辑。
• 校验逻辑反转：<aui:validator>的自定义校验函数返回true代表校验通过，返回false才会触发错误提示。原代码的正则匹配的是「包含超出Latin-1范围字符」的内容，直接返回匹配结果会把非法内容判定为通过，逻辑完全相反。
• 规则范围偏差：原正则的\x{00}-\x{00FF}仅覆盖了单字节的Latin-1字符范围，而UTF-8本身支持多字节字符（如中文、emoji等均为合法UTF-8字符），原规则会误判合法多字节UTF-8内容为非法。

修正后实现 #

场景1：仅允许单字节UTF-8字符（禁止中文等多字节字符） #

如果业务要求输入只能是ASCII、拉丁字母等单字节内容，用以下代码：

<div>
  <aui:validator name="custom" errorMessage="error.message">
    function (val, fieldNode, ruleValue) {
      var pattern = /^[\x{00}-\x{00FF}]*$/u;
      return pattern.test(val);
    }
  </aui:validator>
</div>

场景2：允许所有合法UTF-8字符，仅排除非法编码内容 #

如果业务允许中文、多字节符号等合法UTF-8内容，仅需要过滤无法被UTF-8编码的非法字符，用以下实现：

<div>
  <aui:validator name="custom" errorMessage="error.message">
    function (val, fieldNode, ruleValue) {
      try {
        new TextEncoder().encode(val);
        return true;
      } catch (err) {
        return false;
      }
    }
  </aui:validator>
</div>

额外注意事项 #

• 如果你用的error.message是Liferay国际化配置key，请确保在项目模块的Language.properties文件中已经添加了该key对应的提示文案，否则前端会直接展示error.message字符串。
• 如果需要兼容IE11及更低版本浏览器，TextEncoderAPI不可用，可以替换为覆盖所有合法UTF-8对应Unicode范围的正则实现即可。

内容的提问来源于stack exchange，提问作者king