添加自定义test校验后，Yup的required校验功能失效

你的代码中required()校验失效，核心原因是Yup链式校验按顺序执行：自定义test放在required前面时，若输入为空字符串，test会先执行——空值经过替换处理后得到的newMessage长度为0，返回false触发自定义错误，后续的required校验就不会被触发了。

另外注意代码里的一个小错误：第二个replace的正则写法有误，replace('/\s/gmi', '')应该改为replace(/\s/gmi, '')（去掉引号，否则会把'/s/gmi'当作普通字符串匹配）。

解决方法 #

方法一：调整校验顺序（推荐）

把required()移到test()前面，先校验输入是否为空，再执行自定义校验：

subject: Yup.string().required().test('checkForManualText', 'Please, add hand-written subject as well',
            function(inputValue) {
                let newMessage = inputValue.replace(/\{{(.+?)\}}/gmi, '').replace(/\s/gmi, '').trim()
                return newMessage.length !== 0
            })

方法二：在test中处理空值逻辑

如果不想调整顺序，可在自定义test里先判断空值，让required的校验逻辑生效：

subject: Yup.string().test('checkForManualText', 'Please, add hand-written subject as well',
            function(inputValue) {
                // 先判断空值，为空时返回false，触发required校验
                if (!inputValue || inputValue.trim().length === 0) {
                    return false;
                }
                let newMessage = inputValue.replace(/\{{(.+?)\}}/gmi, '').replace(/\s/gmi, '').trim()
                return newMessage.length !== 0
            }).required()

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