Reactjs 使用react-validation-mixin验证redux表单

我以前使用

Joi

和

react-validation-mixin

编写了一个表单，它运行得非常好

现在，我的团队决定从旧平台迁移，现在我们正在为新表单使用

redux

和

redux表单

我想要实现的是将我的旧验证系统保持在

redux表单中

因此，验证部分基本上是：

import Joi from 'joi';
import validation from 'react-validation-mixin';
import strategy from 'joi-validation-strategy';
import classnames from 'classnames';

class Form extends Component {
  constructor(props) {
    super(props);

    this.validatorTypes = {
      screenName: Joi.string().label('Screen Name'),
      ...
    };

    this.getValidatorData = this.getValidatorData.bind(this);
    this.renderHelpText = this.renderHelpText.bind(this);
    this.getClasses = this.getClasses.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  onChange(field) {
    return (event) => {
      const { value } = event.target;
      this.props.updateField(field, value);
    };
  }

  getValidatorData() {
    return this.props;
  }

  getClasses(field) {
    const { isValid } = this.props;
    return classnames({
      'form-group': true,
      'has-error': !isValid(field),
    });
  }

  renderHelpText(message) {
    return (
      <span className="validation-error-message">{message}</span>
    );
  }

  render() {
    return (
      ...
    );
  }
}

export default validation(strategy)(Form);

我看到

redux表单

接受一个名为

validate

的属性，在那里我尝试传递

validation（strategy）

，但它只会生成错误

我也试着连锁出口，包括它，但它没有工作在所有

问题是，在使用

redux表单时，如何使用旧的
react validation mixin
策略和
Joi
验证我的表单

谢谢
这似乎不是一个完全容易解决的问题，但是您可以通过使用Joi作为验证的基础来最小化重构的影响。因为Joi验证是异步的，所以可以使用。看起来是这样的：

import Joi from 'joi';
import strategy from 'joi-validation-strategy';
...

class Form extends Component {
   ...
}

//ideally put this in a utility file so you can use it anywhere you have form validation
const asyncJoiValidationWrapper = (schema) => {
   return (reduxFormValues) => {
      strategy().validate(reduxFormValues, schema, {}, errors => {

         //joi validation errors should be in the error format redux-forms needs
         //i.e. {screenName: 'Screen Name is not valid'}
         throw errors;
      });
   }
}  

//take this out of your constructor
const validatorTypes = {
  screenName: Joi.string().label('Screen Name'),
  ...
};

export default connect(
   state => ({
      initialValues: state.initialValues,
}),
)(reduxForm({
   form: 'form',
   asyncValidate: asyncJoiValidationWrapper(validatorTypes)
})(Form));

对不起，我不在。我会尽快测试你的方法。谢谢
import Joi from 'joi';
import strategy from 'joi-validation-strategy';
...

class Form extends Component {
   ...
}

//ideally put this in a utility file so you can use it anywhere you have form validation
const asyncJoiValidationWrapper = (schema) => {
   return (reduxFormValues) => {
      strategy().validate(reduxFormValues, schema, {}, errors => {

         //joi validation errors should be in the error format redux-forms needs
         //i.e. {screenName: 'Screen Name is not valid'}
         throw errors;
      });
   }
}  

//take this out of your constructor
const validatorTypes = {
  screenName: Joi.string().label('Screen Name'),
  ...
};

export default connect(
   state => ({
      initialValues: state.initialValues,
}),
)(reduxForm({
   form: 'form',
   asyncValidate: asyncJoiValidationWrapper(validatorTypes)
})(Form));