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

您似乎在两种验证方式上都做错了，如果验证通过，则想返回true，如果验证失败，则想返回false。

在第一次验证value && value.length < 2 ? true : false中，您正在寻找的是value.length > 2而不是<，并且也不需要三元，因为比较运算符将在评估后返回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);
        })
});

是的：测试失败验证

1 个答案: