使用 Yup 进行电话号码验证

Yup 是一个流行的 JavaScript 校验库，可以用来验证用户输入的数据。本文将介绍如何使用 Yup 来验证电话号码。

安装和导入 Yup

首先，在终端中使用以下命令安装 Yup：

npm install yup

然后，在项目中导入 Yup：

import * as Yup from 'yup';

创建电话号码验证模式

接下来，我们需要使用 Yup 来创建一个电话号码验证模式。以下代码可以帮助你创建电话号码验证模式：

const phoneRegExp = /^\(?([0-9]{3})\)?[-]?([0-9]{3})[-]?([0-9]{4})$/;

export const phoneSchema = Yup.string()
  .matches(phoneRegExp, '电话号码格式不正确')
  .required('电话号码不能为空');

在这个代码中，我们创建了一个名为 phoneSchema 的电话号码验证模式，它使用了一个正则表达式来验证电话号码。如果输入的电话号码格式不正确，就会返回一个错误消息。同时，该验证模式也会检查电话号码是否为空，如果为空，则会返回一个错误消息。

使用电话号码验证模式

一旦我们创建了电话号码验证模式，就可以将其应用到需要验证电话号码的输入框中。以下代码演示了如何使用电话号码验证模式来验证输入框中的数据：

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      phone: '',
    },
    validationSchema: Yup.object({
      phone: phoneSchema,
    }),
    onSubmit: values => {
      console.log(values);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="phone">电话号码：</label>
      <input
        type="text"
        id="phone"
        name="phone"
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        value={formik.values.phone}
      />
      {formik.touched.phone && formik.errors.phone ? (
        <div>{formik.errors.phone}</div>
      ) : null}
      <button type="submit">提交</button>
    </form>
  );
};

该表单使用了 useFormik hook 来处理表单数据，并将电话号码验证模式应用到了输入框中。如果输入的电话号码格式不正确或为空，就会在输入框下方显示一个错误消息。

结论

Yup 是一个强大的 JavaScript 校验库，可以帮助我们验证用户输入的数据。本文介绍了如何使用 Yup 来验证电话号码，并提供了一个完整的示例代码，希望能够帮助开发者们更好地使用 Yup 来验证输入数据。