代码实现
<Form ref={form => this.form = form} onFinish={this.handleOk} initialValues={{ id }}>
<FormElement type="hidden" name="id" />
<FormElement
label="新密码"
type="password"
name="password"
required
rules={[{
pattern:
/^(?![^a-zA-Z]+$)(?!\\D+$).{8,16}$/,
message: "8-16位字符,必须包括字母和数字",
}]}
/>
<FormElement
label="确认密码"
type="password"
name="reNewPassword"
dependencies={['password']}
required
rules={[
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject('新密码与确认新密码不同!');
},
}),
]}
/>
</Form>
知识点一: dependencies
当字段间存在依赖关系时使用。如果一个字段设置了 dependencies 属性。那么它所依赖的字段更新时,该字段将自动触发更新与校验。一种常见的场景,就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段,设置 dependencies 后,“密码”字段更新会重新触发“校验密码”的校验逻辑。
知识点二: getFieldValue
知识点三:validator
自定义 validator 没有效果
这是由于你的 validator 有错误导致 callback 没有执行到。你可以选择通过 async 返回一个 promise 或者使用 try…catch 进行错误捕获:
validator: async (rule, value) => {
throw new Error('Something wrong!');
}
// or
validator(rule, value, callback) => {
try {
throw new Error('Something wrong!');
} catch (err) {
callback(err);
}
}