这有点奇怪的行为,但我实际上无法弄清楚我的验证:)
发生了什么我有一个字段级验证
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')
表示它将始终有效。您正在根据allValues
中email
属性的值验证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';
}
此条件将始终失败,这意味着验证将通过。