React(.ts文件)验证码校验:超6位数字输入触发无效提示配置
问题原因
原有正则规则/[0-9]{6}/仅校验字符串中是否存在连续6位数字,没有限制字符串整体长度,所以输入超过6位数字时,只要内容里包含连续6个数字就会通过校验,无法触发错误提示。
修复方案
给正则增加首尾锚点^和$,强制校验整个输入值必须是刚好6位纯数字,不足6位、超过6位、包含非数字字符都会触发无效提示。
修复后的完整代码如下:
export const verifyValidation: IVerifyValidation = { code: { code: { required: { value: true, message: 'Invalid verification code.', }, pattern: { value: /^[0-9]{6}$/, message: 'Invalid verification code.', }, }, }, };
规则说明
^:匹配输入字符串的起始位置$:匹配输入字符串的结束位置- 加上两个锚点后,正则会校验整个输入串的完整内容,不会只匹配局部符合规则的片段,从根本上解决超过6位数字漏判的问题。
内容的提问来源于stack exchange,提问作者Josh
相关产品推荐
相关产品推荐

