antd4 Form表单验证的错误信息用Tooltip展示

    1、Tooltip属性

    autoAdjustOverflow={false}   // 气泡被遮挡时是否自动调整位置

    open={!!errorInfo1}  // 用于手动控制浮层显隐

   2、Form.Item属性

    help=''   // 设置这个不显示错误信息

    hidden   // 隐藏当前项不显示

  3、Form属性

   validateTrigger={['onChange']}  // 设置字段校验的时机

import React, { Component } from 'react'
import { Form, Input, Row, Col, Select, Button, Tooltip } from 'antd'
const { Option } = Select;
class FormAntd extends Component {
    constructor(props) {
        super(props)
        this.state = {
            errorInfo: '',
            errorInfo1: '',
            errorInfo2: '',
        }
    }
 
    formRef = React.createRef()
 
    onValuesChange = (changedValues, allValues) => {
        console.log('onValuesChange', changedValues, allValues);
    }
    onFinish = (value) => {　　// 点击提交时,做最后的校验
        console.log('onFinish', value);
        // const form = this.formRef.current
        // form.validateFields().then((values) => {　　// 如果全部字段通过校验，会走then方法，里面可以打印出表单所有字段（一个object）
        //     console.log('成功')
        //     console.log(values)
        // }).catch((errInfo) => {　　// 如果有字段没听过校验，会走catch，里面可以打印所有校验失败的信息
        //     console.log('失败');
        //     console.log(errInfo);
        // })
    }
    onFinishFailed = ({ values, errorFields, outOfDate }) => {　　// 点击提交时,做最后的校验
        console.log('onFinishFailed', values, errorFields, outOfDate);
    }
 
    render() {
        const layout = {
            labelCol: { span: 8 },
            wrapperCol: { span: 16 },
        }
        const { errorInfo, errorInfo1, errorInfo2 } = this.state;
        return (
            <div>
                <h3>表单校验-demoh3>
                <Form ref={this.formRef}
                    {...layout}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                    onValuesChange={this.onValuesChange}
                    validateTrigger={['onChange']}
                    style={{ width: '600px', margin: '0 auto' }}
                >
                    <Row gutter={24}>
                        <Col span={24} key="select1">
                            <Tooltip placement="right" title={errorInfo1}
                                autoAdjustOverflow={false}
                                open={!!errorInfo1}>
                                <Form.Item label="下拉框1" name="select1" 
                                    rules={[{ required: true, message: '请输入用户名!' },
                                    ]}
                                >
                                    <Select
                                        mode="multiple"
                                        showSearch
                                        placeholder="下拉框1"
                                        // onChange={this.handleChangeSchool}
                                        style={{ width: '100%' }}
                                    >
                                        <Option key='1' value='11'>aaOption>
                                        <Option key='2' value='22'>bbOption>
                                        <Option key='3' value='33'>ccOption>
                                    Select>
                                Form.Item>
                            Tooltip>
                        Col>
                        <Col span={24} key="text1">
                            <Tooltip placement="right" title={errorInfo2}
                                autoAdjustOverflow={false}
                                open={!!errorInfo2}>
                                <Form.Item label="密码" name="text1"
                                    // validateTrigger={['onBlur']}
                                    // validateTrigger={['onChange']}
                                    help=''   // 设置这个不显示错误信息
                                    // hidden   // 隐藏当前项不显示
                                    rules={[
                                        // { required: true, message: '请输入密码!' },
                                        // { min: 6, message: '密码至少6位!' },
                                        // { max: 10, message: '密码最长10位!' },
                                        {
                                            validator: (_, value) => {
                                                if (!value) {
                                                    this.setState({
                                                        errorInfo2: '请输入密码!'
                                                    });
                                                    return Promise.reject('请输入密码!')
                                                } else if (value && (value.length < 6 || value.length > 10)) {
                                                    this.setState({
                                                        errorInfo2: 'text1必须是6~10位'
                                                    });
                                                    return Promise.reject('text1必须是6~10位')
                                                } else {
                                                    this.setState({
                                                        errorInfo2: ''
                                                    });
                                                    return Promise.resolve()
                                                }
                                            }
                                        }
                                    ]}
                                >
                                    <Input placeholder="text1" />
                                Form.Item>
                            Tooltip>
                        Col>
                        <Col span={24} key="text2">
                            <Tooltip placement="right" title={errorInfo}
                                autoAdjustOverflow={false}
                                open={!!errorInfo}>
                                <Form.Item label="确认密码" name="text2"
                                    // validateTrigger="onfocus"
                                    // validateTrigger={['onChange']}
                                    // hidden
                                    help=''
                                    rules={[
                                        {
                                            validator: (_, value) => {
                                                const form = this.formRef.current
                                                let text1 = form.getFieldValue('text1')
                                                if (value && (value.length < 6 || value.length > 10)) {
                                                    this.setState({
                                                        errorInfo: 'text1必须是6~10位'
                                                    });
                                                    return Promise.reject('text1必须是6~10位')
                                                } else if (text1 !== value) {
                                                    this.setState({
                                                        errorInfo: '两次密码不一致'
                                                    });
                                                    return Promise.reject(new Error('两次密码不一致'))
                                                } else {
                                                    this.setState({
                                                        errorInfo: ''
                                                    });
                                                    return Promise.resolve()
                                                }
                                            }
                                        }
                                    ]}
                                >
                                    <Input placeholder="text2" />
                                Form.Item>
                            Tooltip>
                        Col>
                        <Col span={24} key="text3">
                            <Form.Item label="文本框3" name="text3"
                                tooltip={{
                                    title: (
                                        '我是浮动提示内容'
                                    ),
                                    color: 'red',
                                    placement: 'rightTop',
                                }}
                            >
                                <Input type="number" placeholder="text3" />
                            Form.Item>
                        Col>
                    Row>
                    <Row>
                        <Col span={24} style={{ textAlign: 'right' }}>
                            <Button type="primary" htmlType='submit' style={{ marginRight: '8px' }}>提交Button>
                        Col>
                    Row>
                Form>
            div>
        )
    }
}
 
 
export default FormAntd;