React Hook Form如何实现正则表达式的反向匹配验证？

有两种简单方式可以实现你需要的反向匹配验证，确保输入内容不含HTML标签：

方法一：修改正则为反向匹配模式 #

如果你的原有正则是用来检测存在HTML标签的（比如/<[^>]+>/），可以直接将其改写为匹配不存在HTML标签的正则，再传给pattern属性。

比如可以用这个反向匹配正则：

/^(?!.*<[^>]+>).*$/

它的逻辑是：从字符串开头开始，断言后续不会出现任何HTML标签格式的内容，以此匹配完全符合要求的字符串。

对应的代码示例：

<input
    type="text"
    {...register('myInput', {
        required: true,
        pattern: {
            value: /^(?!.*<[^>]+>).*$/,
            message: '输入内容不能包含HTML标签'
        }
    })}
/>

方法二：使用validate自定义验证函数 #

如果不想修改已有的检测HTML标签正则，可以用React Hook Form提供的validate配置项，手动实现反向验证逻辑：

// 假设你已有的检测HTML标签正则是这个
const htmlTagRegex = /<[^>]+>/;

<input
    type="text"
    {...register('myInput', {
        required: true,
        validate: (value) => {
            // 匹配到HTML标签就返回错误信息，否则返回true表示验证通过
            return !htmlTagRegex.test(value) || '输入内容不能包含HTML标签';
        }
    })}
/>

这种方式更灵活，适合需要复用原有正则的场景，直接通过!取反验证结果即可。

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