Question

我正在使用React-Validation-Mixin和Joi以及Joi-Validation-Strategy对React Step / Wizard表单进行一些验证。

我有一个父FormStart元素，通过道具接收其FormStep个孩子的状态。

验证正确表示输入是必需的，但是当我在浏览器中写入正确的数字时（5个数字，如PLZ / ZIP-Code），它仍然会发出输入无效的信号，即使{{ 1}} state显示正确的5位数字，因此下一个按钮永远不会将我带到下一个Form步骤。

zip

React控制台显示class FormStart extends Component { constructor(props) { super(props); this.state = { step: 1, zip: "" } this.goToNext = this.goToNext.bind(this); } goToNext() { const { step } = this.state; if (step !== 10) { this.setState({ step: step + 1 }); if (step == 9) { const values = { zip: this.state.zip, }; console.log(values); // submit `values` to the server here. } } } handleChange(field) { return (evt) => this.setState({ [field]: evt.target.value }); } render(){ switch (this.state.step) { case 1: return <FormButton onSubmit={this.goToNext} />; //omitting the other 8 cases case 9: return <FormStep7 onSubmit={this.goToNext} zip={this.state.zip} onZipChange={this.handleChange('zip')} />; case 10: return <FormSuccess/>; } } } export default FormStart;状态已正确更改，并且Validation对象也会收到相同的正确5位数邮政编码，并且仍保留正确的值zip。

onBlur

我做错了什么？

Answer 1

我发现问题出在Joi.number()上。我更改了验证以匹配正则表达式字符串模式然后它工作。

this.validatorTypes = {
  PLZ: Joi.string().regex(/^[0-9]{5}$/).label('PLZ').options({
    language: {
        string: {
            regex: {
                base: "mit 5 Nummern wird benötigt"
            }
        }
     }
  })
};

React Form验证显示错误

1 个答案: