import React from 'react';
import S from './style.scss';
import { Form, Select, Input, Button,Modal} from 'antd';
class FormCop extends React.Component {
//新密码一致校验
handleCheckPwd(rules,value,callback){
let cfmPwd = this.props.form.getFieldValue('cfmloginpass');
if(cfmPwd && cfmPwd !== value){
callback(new Error('两次密码输入不一致'))
}else{
// Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
callback();
}
}
//确认密码校验一致
handleCfmPwd(rules,value,callback){
let loginpass = this.props.form.getFieldValue('loginpass');
if(loginpass && loginpass !== value){
callback(new Error('两次密码输入不一致'))
}else{
// Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
callback();
}
}
render(){
const {visible,onCancel,onOk,form} = this.props;
const {getFieldDecorator} = form;
return (
<Modal
visible={visible}
title="修改密码"
okText="确定"
cancelText="取消"
onCancel={onCancel}
onOk={onOk}
centered
>
<Form labelCol={{ span: 5 }} wrapperCol={{ span: 19 }}>
<Form.Item label="旧密码">
{getFieldDecorator('oldPassword', {
rules: [{ required: true, message: 'Please input your note!' }],
})(<Input autoComplete="off" />)}
</Form.Item>
<Form.Item label="新密码">
{getFieldDecorator('loginpass', {
rules: [{ required: true, message: 'Please input your note!' },{
validator:(rules,value,callback)=>
{this.handleCheckPwd(rules,value,callback)}
}],
validateFirst:true
})(<Input autoComplete="off" />)}
</Form.Item>
<Form.Item label="确认密码">
{getFieldDecorator('cfmloginpass', {
rules: [{ required: true, message: 'Please input your note!' },{
validator:(rules,value,callback)=>
{this.handleCfmPwd(rules,value,callback)}
}],
validateFirst:true
})(<Input autoComplete="off" />)}
</Form.Item>
</Form>
</Modal>
);
}
}
const PwdUpdate = Form.create({ name: 'coordinated' })(FormCop);
export default PwdUpdate;
使用validator进行自定义校验，校验的回调函数中必须返回一个callback()。
两次密码由于可能先输入了确认密码再去输入上一个密码框，所以都需要进行是否一致检验。
validateFirst：当某一规则校验不通过时，是否停止剩下的规则的校验，默认为false，这里设置为true避免多条验证不通过时有多条错位信息同时显示出来
