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

    1、Tooltip属性

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

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

   2、Form.Item属性

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

    hidden   // 隐藏当前项不显示

  3、Form属性

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

1.  
   import React, { Component } from 'react'
2.  
   import { Form, Input, Row, Col, Select, Button, Tooltip } from 'antd'
3.  
   const { Option } = Select;
4.  
   class FormAntd extends Component {
5.  
   constructor(props) {
6.  
   super(props)
7.  
   this.state = {
8.  
   errorInfo: '',
9.  
   errorInfo1: '',
10.  
    errorInfo2: '',
11.  
    }
12.  
    }
13.  
     
14.  
    formRef = React.createRef()
15.  
     
16.  
    onValuesChange = (changedValues, allValues) => {
17.  
    console.log('onValuesChange', changedValues, allValues);
18.  
    }
19.  
    onFinish = (value) => {　　// 点击提交时,做最后的校验
20.  
    console.log('onFinish', value);
21.  
    // const form = this.formRef.current
22.  
    // form.validateFields().then((values) => {　　// 如果全部字段通过校验，会走then方法，里面可以打印出表单所有字段（一个object）
23.  
    // console.log('成功')
24.  
    // console.log(values)
25.  
    // }).catch((errInfo) => {　　// 如果有字段没听过校验，会走catch，里面可以打印所有校验失败的信息
26.  
    // console.log('失败');
27.  
    // console.log(errInfo);
28.  
    // })
29.  
    }
30.  
    onFinishFailed = ({ values, errorFields, outOfDate }) => {　　// 点击提交时,做最后的校验
31.  
    console.log('onFinishFailed', values, errorFields, outOfDate);
32.  
    }
33.  
     
34.  
    render() {
35.  
    const layout = {
36.  
    labelCol: { span: 8 },
37.  
    wrapperCol: { span: 16 },
38.  
    }
39.  
    const { errorInfo, errorInfo1, errorInfo2 } = this.state;
40.  
    return (
41.  
    <div>
42.  
    <h3>表单校验-demo</h3>
43.  
    <Form ref={this.formRef}
44.  
    {...layout}
45.  
    onFinish={this.onFinish}
46.  
    onFinishFailed={this.onFinishFailed}
47.  
    onValuesChange={this.onValuesChange}
48.  
    validateTrigger={['onChange']}
49.  
    style={{ width: '600px', margin: '0 auto' }}
50.  
    >
51.  
    <Row gutter={24}>
52.  
    <Col span={24} key="select1">
53.  
    <Tooltip placement="right" title={errorInfo1}
54.  
    autoAdjustOverflow={false}
55.  
    open={!!errorInfo1}>
56.  
    <Form.Item label="下拉框1" name="select1"
57.  
    rules={[{ required: true, message: '请输入用户名!' },
58.  
    ]}
59.  
    >
60.  
    <Select
61.  
    mode="multiple"
62.  
    showSearch
63.  
    placeholder="下拉框1"
64.  
    // onChange={this.handleChangeSchool}
65.  
    style={{ width: '100%' }}
66.  
    >
67.  
    <Option key='1' value='11'>aa</Option>
68.  
    <Option key='2' value='22'>bb</Option>
69.  
    <Option key='3' value='33'>cc</Option>
70.  
    </Select>
71.  
    </Form.Item>
72.  
    </Tooltip>
73.  
    </Col>
74.  
    <Col span={24} key="text1">
75.  
    <Tooltip placement="right" title={errorInfo2}
76.  
    autoAdjustOverflow={false}
77.  
    open={!!errorInfo2}>
78.  
    <Form.Item label="密码" name="text1"
79.  
    // validateTrigger={['onBlur']}
80.  
    // validateTrigger={['onChange']}
81.  
    help='' // 设置这个不显示错误信息
82.  
    // hidden // 隐藏当前项不显示
83.  
    rules={[
84.  
    // { required: true, message: '请输入密码!' },
85.  
    // { min: 6, message: '密码至少6位!' },
86.  
    // { max: 10, message: '密码最长10位!' },
87.  
    {
88.  
    validator: (_, value) => {
89.  
    if (!value) {
90.  
    this.setState({
91.  
    errorInfo2: '请输入密码!'
92.  
    });
93.  
    return Promise.reject('请输入密码!')
94.  
    } else if (value && (value.length < 6 || value.length > 10)) {
95.  
    this.setState({
96.  
    errorInfo2: 'text1必须是6~10位'
97.  
    });
98.  
    return Promise.reject('text1必须是6~10位')
99.  
    } else {
100.  
     this.setState({
101.  
     errorInfo2: ''
102.  
     });
103.  
     return Promise.resolve()
104.  
     }
105.  
     }
106.  
     }
107.  
     ]}
108.  
     >
109.  
     <Input placeholder="text1" />
110.  
     </Form.Item>
111.  
     </Tooltip>
112.  
     </Col>
113.  
     <Col span={24} key="text2">
114.  
     <Tooltip placement="right" title={errorInfo}
115.  
     autoAdjustOverflow={false}
116.  
     open={!!errorInfo}>
117.  
     <Form.Item label="确认密码" name="text2"
118.  
     // validateTrigger="onfocus"
119.  
     // validateTrigger={['onChange']}
120.  
     // hidden
121.  
     help=''
122.  
     rules={[
123.  
     {
124.  
     validator: (_, value) => {
125.  
     const form = this.formRef.current
126.  
     let text1 = form.getFieldValue('text1')
127.  
     if (value && (value.length < 6 || value.length > 10)) {
128.  
     this.setState({
129.  
     errorInfo: 'text1必须是6~10位'
130.  
     });
131.  
     return Promise.reject('text1必须是6~10位')
132.  
     } else if (text1 !== value) {
133.  
     this.setState({
134.  
     errorInfo: '两次密码不一致'
135.  
     });
136.  
     return Promise.reject(new Error('两次密码不一致'))
137.  
     } else {
138.  
     this.setState({
139.  
     errorInfo: ''
140.  
     });
141.  
     return Promise.resolve()
142.  
     }
143.  
     }
144.  
     }
145.  
     ]}
146.  
     >
147.  
     <Input placeholder="text2" />
148.  
     </Form.Item>
149.  
     </Tooltip>
150.  
     </Col>
151.  
     <Col span={24} key="text3">
152.  
     <Form.Item label="文本框3" name="text3"
153.  
     tooltip={{
154.  
     title: (
155.  
     '我是浮动提示内容'
156.  
     ),
157.  
     color: 'red',
158.  
     placement: 'rightTop',
159.  
     }}
160.  
     >
161.  
     <Input type="number" placeholder="text3" />
162.  
     </Form.Item>
163.  
     </Col>
164.  
     </Row>
165.  
     <Row>
166.  
     <Col span={24} style={{ textAlign: 'right' }}>
167.  
     <Button type="primary" htmlType='submit' style={{ marginRight: '8px' }}>提交</Button>
168.  
     </Col>
169.  
     </Row>
170.  
     </Form>
171.  
     </div>
172.  
     )
173.  
     }
174.  
     }
175.  
      
176.  
      
177.  
     export default FormAntd;

这篇好文章是转载于：学新通技术网