Redux Form 7.3 输入验证篇

Redux Form 是一个用于 React 应用程序的强大表单库，它可以帮助开发者轻松地管理表单状态，并提供了一系列常用的表单元素，如文本框、下拉框、单选框等。而在 Redux Form 7.3 版本中，输入验证功能得到了增强，本文将介绍 Redux Form 7.3 的输入验证功能，包括如何自定义验证规则、如何在表单中使用验证规则等。

自定义验证规则

Redux Form 提供了一些常用的验证规则，如 required、email、url 等，但有时候我们需要使用自定义的验证规则，Redux Form 7.3 版本提供了一种自定义验证规则的方式，即使用 redux-form-validators 库。下面是一个示例：

import { combineValidators, isRequired, isEmail } from 'redux-form-validators';

const validate = combineValidators({
  firstName: isRequired({ message: '请填写您的名字' }),
  email: isEmail({ message: '请填写正确的邮箱地址' }),
});

export default validate;

在上面的示例中，我们使用了 combineValidators 方法将两个验证规则 isRequired 和 isEmail 组合成一个验证器 validate，然后将其导出。这样，我们就可以在表单中使用这个验证器了。

在表单中使用验证规则

在 Redux Form 7.3 中，我们可以在表单的 Field 组件中使用验证规则。下面是一个示例：

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import validate from './validate';

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
);

const ContactForm = props => {
  const { handleSubmit } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field name="firstName" component={renderField} type="text" label="名字" />
      <Field name="email" component={renderField} type="email" label="邮箱" />
      <button type="submit">提交</button>
    </form>
  );
};

export default reduxForm({
  form: 'contact',
  validate,
})(ContactForm);

在上面的示例中，我们首先导入了 validate 验证器，然后在 reduxForm 方法中将其传递给表单。接着，在 Field 组件中，我们使用了 name 属性指定了字段名称，使用了 component 属性指定了渲染组件，使用了 type 属性指定了输入类型，使用了 label 属性指定了标签。最后，我们在渲染组件中使用了 meta 属性来获取验证结果，如果验证结果有错误，则渲染一个错误提示。

总结

Redux Form 7.3 版本的输入验证功能得到了增强，我们可以使用自定义验证规则，并在表单中使用验证规则。通过学习本文，我们可以更好地使用 Redux Form 库来管理表单状态，提高开发效率。

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