是的：测试验证失败

Question

我正在使用 yup 来验证我的反应形式。

我的问题是：

我有以下用于验证输入字段的架构。

object().shape({
    firstname: string()
        .required('First Name is required')
        .test('length', 'First Name must have more than 1 character', (value) => {
            console.log(value && value.length < 2 ? true : false);
            return value && value.length < 2 ? true : false;
        })
        .test('alphabets', 'Name must only contain alphabets', (value) => {
            console.log(!/^[A-Za-z]+$/.test(value));
            return !/^[A-Za-z]+$/.test(value);
        })
});

当我输入一个字符时它显示 Name must only contain alphabets 错误消息，当我尝试输入更多字符时它显示 First Name must have more than 1 character 错误消息。

我应该做错什么？

有人帮我解决这个问题吗？

Answer 1

您似乎以错误的方式进行了两种验证，如果验证通过，您想要 return true，如果验证失败，则 false。

在您的第一次验证中 value && value.length < 2 ? true : false 您正在寻找 value.length > 2 而不是 < 并且也不需要三元比较运算符 return true/false 评估后的价值。

在您的第二次验证中 !/^[A-Za-z]+$/.test(value); 您使用 !

否定验证

这是更正后的验证码：

object().shape({
    firstname: string()
        .required('First Name is required')
        .test('length', 'First Name must have more than 1 character', (value) => {
            return value && value.length > 2;
        })
        .test('alphabets', 'Name must only contain alphabets', (value) => {
            return /^[A-Za-z]+$/.test(value);
        })
});

是的：测试验证失败

Yup: Validation with test failes

reactjs

yup

formik