Question

我正在尝试用reactjs material ui和formik来验证电话号码字段

我读了很多文章，但无法以自己的方式实现。

我正在此处提交组件的可复制代码：

import React from 'react';
import TextField from '@material-ui/core/TextField';

import { connect } from "react-redux";
import { FormGroup } from '@material-ui/core';

import {
  Formik, Form, Field, ErrorMessage,
} from 'formik';
import * as Yup from 'yup';


function App(props) {

  const [values, setValues] = React.useState({
    phone: '',
  });


  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };


  const validationSchema = Yup.object({
    phone: Yup.string("")
      .min(11, "phone must contain atleast 11 characters")
      .required("Enter your phone"),
  });



  return (

    <React.Fragment>

      <FormGroup autoComplete="on">
        <TextField
          id=""
          label="Phone"
          value={values.phone}
          onChange={handleChange('phone')}
          type="number"
          name='phone'
        />
      </FormGroup>

    </React.Fragment>

  );
}


export default connect(null)(App);

有人可以帮助我完成验证吗？我正在尝试过去6天，并阅读了完整的文档，但我没有这样做。

在这种情况下，如果有人可以帮助我，将不胜感激？

Answer 1

请使用''material-ui-phone-number'。它将通过掩码验证输入。您不必弄脏您的手。但是您可能需要清理从Formik返回的电话号码值。

import MuiPhoneNumber from 'material-ui-phone-number'

<Field
  name="phoneNumber"
  label={t('Phone Number')}
  component={MuiPhoneNumber}
  variant="outlined"
  defaultCountry="mm"
  fullWidth
  onChange={v => setFieldValue('phoneNumber', v)}
  helperText={touched.phoneNumber ? t(errors.phoneNumber) : ''}
  error={touched.phoneNumber && Boolean(errors.phoneNumber)} />

使用formik的ReactJS材质UI表单验证

1 个答案: