React 中的表单验证及使用技巧-JavaScript中文网-JavaScript教程资源分享门户

React 是目前最受欢迎的前端框架之一，其中表单验证是前端开发中非常重要的一个部分。在本文中，我们将探讨 React 中实现表单验证的不同方式，并提供一些使用技巧和最佳实践。

表单验证的重要性

表单验证是确保用户提供的数据是正确和可靠的关键步骤。对于一些应用程序或网站，不良数据输入可能会导致严重的后果，例如：

欺诈信用卡交易
不良的数据操作
安全漏洞
对系统的意外破坏

在 React 应用程序中，表单验证可以通过以下方式实现：

1. 使用 HTML5 表单验证属性

在 HTML5 中，可以使用表单验证属性有效地验证表单数据。这些属性包括：

required
pattern
min 和 max
step
maxlength 和 minlength
multiple

React 支持 HTML5 表单验证，并可以通过实现 onSubmit 和 onChange 方法来验证数据。以下是一个验证电子邮件地址的 HTML5 表单示例：

<form>
  <label>
    Email:
    <input
      type="email"
      name="email"
      required
      onChange="{this.handleChange}"
    />
   </label>
   <button type="submit">Submit</button>
</form>

2. 通过第三方库实现表单验证

React 中有许多第三方表单验证库可供选择的，比如 Formik 和 Redux-Form 等。这些库通常提供了一些非常有用的特性，例如：

Schema 检查
异步验证
消息检查

以下是使用 Formik 库的示例：

import React from 'react';
import { Formik } from 'formik';

const Basic = () => (
  <div>
    <h1>Sign Up</h1>
    <Formik
      initialValues={{ email: '', password: '' }}
      validate={values => {
        const errors = {};
        if (!values.email) {
          errors.email = 'Required';
        } else if (
          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
        ) {
          errors.email = 'Invalid email address';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit,
          isSubmitting,
          /* and other goodies */
        }) => (
        <form onSubmit={handleSubmit}>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            name="email"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.email}
          />
          {errors.email && touched.email && errors.email}
          <label htmlFor="password">Password</label>
          <input
            type="password"
            name="password"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.password}
          />
          {errors.password && touched.password && errors.password}
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </form>
      )}
    </Formik>
  </div>
);

export default Basic;

3. 编写自定义验证逻辑

除使用第三方库以外，还可以编写自定义客户端验证逻辑来验证表单数据。这是通过 React 中的 setState 方法以及事件处理程序实现的。以下是使用 React 和自定义验证逻辑的示例：

class SignUpForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { email: '', password: '', valid: false };
  }

  handleChange = event => {
    const name = event.target.name;
    const value = event.target.value;
    const validEmail = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(
      this.state.email,
    );
    const validPassword = this.state.password.length >= 6;
    this.setState({
      [name]: value,
      valid: validEmail && validPassword,
    });
  };

  handleSubmit = event => {
    event.preventDefault();
    alert(`Submitting ${this.state.email} ${this.state.password}`);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Email:
          <input
            type="email"
            name="email"
            value={this.state.email}
            onChange={this.handleChange}
          />
        </label>

        <label>
          Password:
          <input
            type="password"
            name="password"
            value={this.state.password}
            onChange={this.handleChange}
          />
        </label>

        <button type="submit" disabled={!this.state.valid}>
          Sign Up
        </button>
      </form>
    );
  }
}

export default SignUpForm;

结论

根据您的需求，可在 React 中通过以下方式实现表单验证：

使用 HTML5 表单验证属性
使用第三方库
编写自定义的验证逻辑

无论哪种方式，都需要了解其特点和最佳实践，以确保数据的完整性和可靠性。希望这篇文章能够为大家提供帮助，也欢迎读者在评论区留言讨论。

参考资料

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/66f4c07ac5c563ced564841c