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>表单校验-demo</h3>
-
<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'>aa</Option>
-
<Option key='2' value='22'>bb</Option>
-
<Option key='3' value='33'>cc</Option>
-
</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;
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfheej
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01