时间戳

首页 > 解决方案 > 文本字段验证。反应：formik，是的

validation - 文本字段验证。反应：formik，是的

问题描述

我有文本字段，需要对其进行验证。这是我的代码示例：

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>

}

使用 React 进行验证的最佳方法是什么？我阅读了有关 formik 和 yup 的信息，但我发现在我的情况下，yup 不是有效的方式。也许任何人都可以为前任提出最佳解决方案。电子邮件？对不起，我是前台新手，所以我不太了解。

标签： validationformikyup

解决方案

在我看来，Formik 是最好的选择。 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>
);

}

推荐阅读