antd 表单正则

记录第一次用antd 遇到的正则问题（两个密码是否一致）

表单里面调用方法的时候 千万不要调用错了，方法中getFieldValue（‘这里也要注意’）

import React, { Component } from "react";
import { Form, Input, Button } from 'antd';
import './../../assets/css/register.css'

class ConfirmPassWordForm extends Component {
    constructor(props) {
        super(props);
    }
    //确认
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    };
    //新密码校验
    handleCfmPwd(rules, value, callback) {
        let loginpass = this.props.form.getFieldValue('loginpass');//注意这里哦
        if (loginpass && loginpass !== value) {
            callback(new Error('两次密码输入不一致'))
        } else {
            // Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
            callback();
        }
    }
    //新密码一致校验
    handleCheckPwd(rules, value, callback) {
        let cfmPwd = this.props.form.getFieldValue('cfmloginpass'); //注意这里哦
        if (cfmPwd && cfmPwd !== value) {
            callback(new Error('两次密码输入不一致'))
        } else {
            // Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
            callback();
        }
    }
    render() {
        const { visible, onCancel, onOk, form } = this.props;
        const { getFieldDecorator } = form;

        return (
            <div className="loginbox">
                <div className="login-left">
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <Form.Item className="toptitle">
                            <h1>我是logo</h1>
                            <h2>Change Password</h2>
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('loginpass', {
                                rules: [
                                    { required: true, message: 'New password cannot be blank' },
                                    { max: 16, message: 'Password should be between 7-16 characters' },
                                    { min: 7, message: 'Password should be between 7-16 characters' },
                                    //密码必须包含英文和数字
                                    { pattern: /^(?![^a-zA-Z]+$)(?!\D+$)/, message: 'Password must contain both numeric and alphabetic characters' },
                                    //调用密码正则方法
                                    { validator: (rules, value, callback) => { this.handleCfmPwd(rules, value, callback)}}
                                ],
                                validateFirst: true
                            })(
                                <Input
                                    type="password"
                                    placeholder="Password"
                                    autoComplete="off"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('cfmloginpass', {
                                rules: [
                                    { required: true, message: 'New password cannot be blank' },
                                    { max: 16, message: 'Password should be between 7-16 characters' },
                                    { min: 7, message: 'Password should be between 7-16 characters' },
                                    //密码必须包含英文和数字
                                    { pattern: /^(?![^a-zA-Z]+$)(?!\D+$)/, message: 'Password must contain both numeric and alphabetic characters' },
                                    //调用密码正则方法
                                    { validator: (rules, value, callback) => { this.handleCheckPwd(rules, value, callback)}}
                                ],
                                validateFirst: true
                            })(
                                <Input
                                    type="password"
                                    placeholder="Password"
                                    autoComplete="off"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item>
                            <p>

                            </p>
                            <Button type="primary" block htmlType="submit" className="login-form-button">
                                Change Password
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <div className="login-right">
                    <img src={require('./../../assets/images/register/right.png')} />
                </div>
            </div>

        );
    }
}

export default Form.create()(ConfirmPassWordForm);