函数返回函数不适用于 redux 表单字段级验证



这有点奇怪的行为,但我实际上无法弄清楚我的验证:)

发生了什么我有一个字段级验证

export const confirm = (valueToConfirm, message) => (value, allValues) => {
if (value !== allValues[valueToConfirm]) {
return message;
}
return undefined;
};

它的使用喜欢

<Field
type="email"
name="confirmEmail"
component={TextInput}
validate={[required, email, confirm('email', 'Bla-bla-bla')]}
/>

这实际上只适用于其他验证失败的情况。因此,如果用户输入更正所有字段,并且只是确认电子邮件与电子邮件不匹配 -则不会有任何验证错误!

但是如果我更改验证,那么它就不会是一个返回函数的函数 - 它可以工作。

export const confirmEmail = (value, allValues) => {
if (!value || value !== allValues.email) {
return 'Bla-bla-bla';
}
return undefined;
};

附言:所有字段级验证都相同,例如动态minLength验证。

我知道你正在使用Redux Field,但这也可以用Vanilla React轻松实现。

<form>
<input
type="text"
name="username"
placeholder="name"
value={this.state.username}
onChange={this.handleChange}/>
</form>
handleChange(e) {
//check for validation here to have real time feedback to user when their 
inputs match what you're looking for. 
}

看起来confirm验证函数不正确。您正在使用的验证函数:

export const confirm = (valueToConfirm, message) => (value, allValues) => {
if (value !== allValues[valueToConfirm]) {
return message;
}
return undefined;
};

使用您正在使用的参数:

confirm('email', 'Bla-bla-bla')

表示它将始终有效。您正在根据allValuesemail属性的值验证email输入的值,即email输入的值。那是:

// value = test@example.com
// allValues = {email: 'test@example.com'}
// valueToConfirm = 'email'
// message = 'Bla bla bla'
if (value !== allValues[valueToConfirm]) {
return 'Bla bla bla';
}

其计算结果为:

if (test@example.com !== test@example.com) {
return 'Bla bla bla';
}

此条件将始终失败,这意味着验证将通过。

相关内容

  • 没有找到相关文章

最新更新