import { Form, Input } from 'antd';
import React, { Component } from 'react';
class ComponentA extends Component {
constructor(props) {
super(props);
}
/**
*
* @param {} rule
* @param {String} vaule
* @param {Function} callback
*/
checkPsd(rule, value, callback) {
if (value) {
this.props.form.validateFields(['userName'], { force: true });
}
}
render() {
const FormItem = Form.Item;
const { getFieldDecorator } = this.props.form;
return (
<Form>
<FormItem label='用户名:'>
{getFieldDecorator('userName', {
rules: [{ required: true, message: '请输入用户名' }]
})(
<Input />
)}
</FormItem>
<FormItem label='密码:'>
{getFieldDecorator('password', {
rules: [
{ required: true, message: '请输入密码' },
{ validator: (rule, value, callback) => { this.checkPsd(rule, value, callback) } }
],
validateTrigger: 'onBlur'
})(
<Input />
)}
</FormItem>
</Form>
)
}
}
export default Form.create()(ComponentA);
其中:validateTrigger: ‘onBlur’,当密码输入框失去焦点时才去校验,为了优化用户体验
this.props.form.validateFields['userName', { force: true }]; 手动触发用户名的校验规则,注意用户名输入控件必须要经过getFieldDecorator()包装,至于为什么要进行包装,可以去官网看文档说明。另外要设置force的值为true,对已经校验过的表单域,在 validateTrigger 再次被触发时再次校验。
完...