Redux Form动态字段ID验证求助：如何批量实现必填与邮箱验证

嘿，我来帮你搞定这个Redux Form动态字段验证的难题！别担心，完全不用给每个带编号的字段单独配置验证规则，我们可以通过通用的验证逻辑来批量处理这类字段。

第一步：编写通用验证函数 #

我们可以通过遍历表单的所有值，用正则匹配字段名的模式（比如{数字}-name、{数字}-email），然后批量应用验证规则：

const validate = values => {
  const errors = {};
  
  // 遍历所有表单字段
  Object.keys(values).forEach(fieldName => {
    // 匹配姓名字段：比如0-name、1-name
    if (fieldName.match(/^\d+-name$/)) {
      if (!values[fieldName]) {
        errors[fieldName] = '姓名为必填项';
      }
    }
    
    // 匹配邮箱字段：比如0-email、1-email
    if (fieldName.match(/^\d+-email$/)) {
      if (!values[fieldName]) {
        errors[fieldName] = '邮箱为必填项';
      } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values[fieldName])) {
        errors[fieldName] = '请输入有效的邮箱地址';
      }
    }
  });
  
  return errors;
};

第二步：将验证函数关联到Redux Form组件 #

把上面的validate函数传给reduxForm高阶组件，这样你的表单就能自动应用这套验证逻辑了：

import { reduxForm, Field } from 'redux-form';

class Dash extends Component {
  ListData = () => {
    let a = [];
    for (var i = 0; i < 5; i++) {
      a.push(<ListItemView value={i} key={i} />);
    }
    return a;
  };

  render() {
    const { handleSubmit } = this.props;
    return (
      <div className="col-lg-12 col-sm-12 col-12 r-p0">
        <form onSubmit={handleSubmit}>
          {this.ListData()}
          <button type="submit">提交表单</button>
        </form>
      </div>
    );
  }
}

// 用reduxForm包装组件，绑定表单标识和验证函数
export default reduxForm({
  form: 'dynamicDashForm', // 给你的表单起个唯一名字
  validate // 传入我们的通用验证函数
})(Dash);

第三步：确保ListItemView组件的字段命名正确 #

你的ListItemView组件里的Field要正确生成带编号的name属性，比如：

// ListItemView组件示例
const ListItemView = ({ value }) => (
  <div className="form-group">
    <Field
      name={`${value}-name`}
      component="input"
      type="text"
      placeholder="请输入姓名"
    />
    <Field
      name={`${value}-email`}
      component="input"
      type="email"
      placeholder="请输入邮箱"
    />
    {/* 这里可以渲染对应字段的错误提示 */}
    {this.props.error && this.props.touched && <span className="text-danger">{this.props.error}</span>}
  </div>
);

为什么这么做？ #

这种方式的好处是：不管你生成多少个动态字段（比如循环10次或者根据后端数据生成），都不用手动给每个字段加验证规则，只需要维护这一个通用的validate函数就行。如果以后要新增其他类型的动态字段（比如电话），只需要在函数里加对应的正则匹配和验证逻辑就可以了。

内容的提问来源于stack exchange，提问作者tapan dave