我如何用Yup验证Material-UI-电话号码？

Posted 2023-01-07

我正在将material-ui-phone-number用于表单的输入字段。我想使用Yup验证电话号码。无论我在该字段中键入什么，它都表明没有输入电话号码。我正在检查应该传递给Yup的字符串的有效性。从文档中说，material-ui-phone-number是从Textfield扩展的，因此应该与Yup一起使用。

    //Yup
    contactPhoneNumber: Yup.string()
        .matches(phoneRegExp, "Phone number is not valid")
        .required("Must enter a phone number")

//ContactInformation.js

    <div className="contactPhoneNumber">
            <MuiPhoneNumber 
                id="contactPhoneNumber"
                label="Phone Number"
                defaultCountry="us"
                variant="filled"
                onChange=handleChange
                onBlur=handleBlur
                value=values.contactPhoneNumber
                className=touched.contactPhoneNumber && errors.contactPhoneNumber ? "has-error" : null
               />
            <Error touched=touched.contactPhoneNumber message=errors.contactPhoneNumber/>

//EventForm.js

export default function EventForm()

    return (
        <Formik 
        initialValues=eventName: "", email: "", 
        validationSchema=validationSchema
        onSubmit=(values, setSubmitting, resetForm) => 
            setTimeout(() => 

                alert(JSON.stringify(values, null, 2));

                setSubmitting(false);

            , 400);
        
        >
             (
                values, 
                errors, 
                touched, 
                handleChange, 
                handleBlur,
                handleSubmit,
                isSubmitting
            ) => (
            <form onSubmit=handleSubmit>

                <EventDetails values=values touched=touched errors=errors handleBlur=handleBlur handleChange=handleChange />
                <Divider />
                <ContactInformation values=values touched=touched errors=errors handleBlur=handleBlur handleChange=handleChange />

                <div className="submitButton">
                    <Button variant="outlined" type="submit" disabled=isSubmitting >
                        Submit
                    </Button>
                </div>

            </form>
            )
        </Formik>
    )

答案

您已经声明了validateSchema = validationSchema

首先为Yup创建一个对象。在其中声明您的验证。

const validationSchema = Yup.object(
contactPhoneNumber: Yup.string()
        .matches(phoneRegExp, "Phone number is not valid")
        .required("Must enter a phone number")
)