Redux-Form 验证错误：字段类型错误-JavaScript中文网-JavaScript教程资源分享门户

在使用 Redux-Form 进行表单验证时，常常会遇到字段类型错误的问题。这种错误通常是由于输入的数据类型与表单中所规定的类型不匹配所导致的。

问题描述

假设我们有一个表单，其中包含一个输入框用于输入年龄。我们希望用户输入的年龄必须是一个数字类型，并且年龄必须大于 18 岁。我们可以使用 Redux-Form 提供的 Field 组件来定义这个输入框的类型和验证规则。

// javascriptcn.com 代码示例
import React from 'react';
import { Field, reduxForm } from 'redux-form';

const validate = values => {
  const errors = {};
  if (!values.age) {
    errors.age = '年龄不能为空';
  } else if (isNaN(Number(values.age))) {
    errors.age = '年龄必须是一个数字';
  } else if (Number(values.age) < 18) {
    errors.age = '年龄必须大于 18 岁';
  }
  return errors;
};

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 MyForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="age"
        type="text"
        component={renderField}
        label="年龄"
      />
      <div>
        <button type="submit" disabled={submitting}>
          提交
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          重置
        </button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'myForm',
  validate
})(MyForm);

在上面的代码中，我们定义了一个 validate 函数来验证输入的数据。如果输入的年龄为空、不是数字或者小于 18 岁，那么就会返回一个错误信息，否则返回一个空对象。

在 MyForm 组件中，我们使用 Field 组件来定义输入框的类型和验证规则。renderField 函数用来渲染输入框，并且根据验证结果来显示错误信息。

问题分析

当我们输入一个非数字的字符时，比如输入 abc，Redux-Form 会自动触发表单验证，并且会显示一个错误信息：“年龄必须是一个数字”。这是因为我们在 validate 函数中定义了这个错误信息。但是，当我们修改输入框中的内容，比如将 abc 改成 123 时，Redux-Form 并没有自动触发表单验证，也没有去掉之前的错误信息。这是因为 Redux-Form 认为输入框中的内容已经符合了验证规则，所以不需要再次验证。

如果我们继续输入一些数字，比如 1234，Redux-Form 仍然不会自动触发表单验证，因为这些数字并没有超过 18 岁。只有当我们输入一个大于等于 18 的数字时，Redux-Form 才会自动触发表单验证，并且会去掉之前的错误信息。

这种行为看起来有些奇怪，因为用户可能会认为只要修改了输入框中的内容，Redux-Form 就应该自动触发表单验证。但是，Redux-Form 的设计思想是尽可能地减少表单验证的次数，以提高性能和用户体验。因此，Redux-Form 只会在必要的时候才会触发表单验证。

解决方法

如果我们希望 Redux-Form 在输入框中的内容发生变化时就能自动触发表单验证，可以使用 onBlur 属性来实现。onBlur 属性指定了当输入框失去焦点时要执行的函数。我们可以在这个函数中手动触发表单验证，以便及时更新错误信息。

// javascriptcn.com 代码示例
const renderField = ({
  input,
  label,
  type,
  meta: { touched, error }
}) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} onBlur={input.onBlur} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
);

在上面的代码中，我们将 input.onBlur 传递给了输入框的 onBlur 属性。这样，当输入框失去焦点时，Redux-Form 就会自动触发表单验证，并且会更新错误信息。

总结

Redux-Form 是一个非常强大的表单处理库，可以帮助我们快速构建复杂的表单。但是，在使用 Redux-Form 进行表单验证时，我们需要注意字段类型错误的问题。如果输入的数据类型与表单中所规定的类型不匹配，Redux-Form 会自动显示一个错误信息。但是，如果我们希望在输入框中的内容发生变化时就能自动触发表单验证，可以使用 onBlur 属性来实现。这样，我们就能及时更新错误信息，提高用户体验。

示例代码：https://codesandbox.io/s/redux-form-verification-9gjxs

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