antd自定义校验规则校验两次密码是否一致

最新推荐文章于 2024-08-24 15:30:52 发布

墨语轩

最新推荐文章于 2024-08-24 15:30:52 发布

阅读量1w

点赞数 3

分类专栏： antd 文章标签： antd form进行密码是否一致验证 antd自定义密码是否一致校验

本文链接：https://blog.csdn.net/MFWSCQ/article/details/102862737

版权

antd 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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避免多条验证不通过时有多条错位信息同时显示出来