如何为 React Material UI 控件添加自定义验证？答案

【问题标题】：How to add Custom Validations for React Material UI controls?如何为 React Material UI 控件添加自定义验证？
【发布时间】：2020-03-29 16:09:16
【问题描述】：

我在应用程序中使用 ReactJs，我需要针对我的所有字段添加验证。

我想添加对姓名、电话号码、电子邮件、密码和确认密码的验证。

当有人在这些字段中输入一些无效数据时，验证消息应与字段一起显示。

import React from 'react';   
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';

const useStyles = makeStyles((theme) => ({
  paper: {
    display: 'flex',
    flexDirection: 'column',
  }
}));

export default function RegisterForm() {
  const classes = useStyles();

  return (
    <Container component="main" maxWidth="xs">        
      <div className={classes.paper}>        
        <form >
          <Grid container spacing={2}>
            <Grid item xs={12} sm={6}>
              <TextField
                autoComplete="name"
                name="name"
                variant="outlined"
                required
                error
                fullWidth
                id="name"
                label="Name"
                autoFocus
              />
            </Grid>           
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                id="email"
                label="Email Address"
                name="email"
                autoComplete="email"
              />
            </Grid>            
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                name="password"
                label="Password"
                type="password"
                id="password"
                autoComplete="password"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                name="repeatpassword"
                label="Repeat Password"
                type="password"
                id="repeatpassword"
                autoComplete="repeat-password"
              />
            </Grid>           
          </Grid>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Create
          </Button>         
        </form>
      </div>    
    </Container>
  );
}

我是反应新手。我应该在我的代码中做什么？

我从这里获取了菜单和卡片的示例代码：https://material-ui.com

Application built with
{
  "react": "16.13.0", 
  "react-dom": "^16.13.0", 
  "react-redux": "^7.2.0",
  "redux": "^4.0.4"
  "@material-ui/core": "^4.9.5"
}

我面临的问题是以下功能出错：

<TextField
                    autoComplete="name"
                    name="name"
                    variant="outlined"
                    required
                    error
                    fullWidth
                    id="name"
                    label="Name"
                    autoFocus
                  />

文本字段上方显示表单提交时所需的验证错误，但这不是我想要实现的。我想根据推荐的方法自定义电子邮件的验证和验证消息、确认电子邮件、电话号码、密码和确认密码。

我尝试按照指南查找示例实现，但找不到解决问题的推荐方法。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我正在使用formik 和yup 在我的应用程序中实现类似的功能。这是一个简单的示例，如何将它们混合在一起： https://codesandbox.io/s/ol11mmk30z

【讨论】：