Проверка текстовых полей. Реагировать: формик, да - PullRequest
Новая
       18

Проверка текстовых полей. Реагировать: формик, да

1 голос
/ 15 апреля 2020

У меня есть текстовые поля, и мне нужно сделать проверку для этого. Вот мой пример кода: 

export default function UserInformation() {

<form className={classes.root} autoComplete="off">
   <div>
       <div>
            <TextField
              className={classes.textField}
              required
              id="Email"
              label="Email"
              defaultValue=""
            />
       </div>
   </div>
</form>

}

Каков наилучший способ выполнить проверку с использованием реакции? Я читал о Formik и Yup, но я обнаружил, что в моем случае Yup не является эффективным способом. Может быть, кто-нибудь может предложить лучшее решение для бывших. для электронной почты? Извините, я новичок, так что не знаю много.

Ответы [ 2 ]

0 голосов
/ 15 апреля 2020

Вы можете использовать схему по умолчанию yups: 

Yup.object().shape({
 email: Yup.string()
            .email('Invalid email!')
            .required('Please, enter email'),
})

Или использовать свой пользовательский: 

Yup.object().shape({
 email: Yup.string()
            .matches(
            /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/, // or any other regex
            'Enter correct email'
        )
        .required('Please, enter phone'),
})
0 голосов
/ 15 апреля 2020

Formik - лучший способ go на мой взгляд. npm install --save formik Тогда в вашем коде: 

import {useFormik} from "formik";

//Has all the validations it is very flexible so edit according to your need.
const validate = values => {
    const errors = {};

    if (!values.password) {
        errors.password = 'Required';
    } else if (!(values.password.length >= 8 && values.password.length < 200)) {
        errors.password = 'Must be greater then 8 characters and less then 200 ';
    }

    if (!values.email) {
        errors.email = 'Required';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
        errors.email = 'Invalid email address';
    }

    return errors;
};

export default function UserInformation() {

//Initialize formik with default values 
 const formik = useFormik({
        initialValues: {
            email: '',
            password: ''
        },
        validate,
       //Called after you click on Submit button below
        onSubmit: values => {
             //DO somthing with values
           }
    });

return(
<form onSubmit={formik.handleSubmit} className={classes.root} autoComplete="off">
   <div>
       <div>
            <TextField
              className={classes.textField}
              required
              id="email"
              name="email"
              label="email"
              defaultValue=""
              //These methods are for validation and handling change.
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              value={formik.values.email}
            />
             //Any errors of validation will be displayed here use any alert component you like
             {formik.touched.email && formik.errors.email ? (
                                    <MDBAlert color="danger" >
                                        {formik.errors.email}
                                    </MDBAlert>
                                ) : null}
       </div>
   </div>
 <button type="submit">Done</button>
</form>
);

}
...