admin管理员组文章数量:1612066
import React from 'react'
import { Card, Form, Input, Button, message, Checkbox } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons';
export default function FormLogin(props) {
//获取表单节点
const formRef = React.createRef()
//校验
const onCheck = async () => {
try {
const values = await formRef.current.validateFields();
console.log('Success:', values);
message.success(`恭喜你,${values.username},提交校验成功,密码为${values.password}`)
} catch (errorInfo) {
console.log('Failed:', errorInfo);
message.warn('提交校验失败')
}
}
return (
<div style={{ width: "100%" }}>
<Card title="登录行内表单">
{/* layout="inline" ———— 全在一行 */}
<Form layout="inline">
<Form.Item>
<Input placeholder="请输入用户名" />
</Form.Item>
<Form.Item>
<Input placeholder="请输入密码" />
</Form.Item>
<Form.Item>
<Button type="primary">登录</Button>
</Form.Item>
</Form>
</Card>
<Card title="登录垂直表单" style={{ marginTop: "10px" }}>
{/* 绑定表单节点 */}
<Form style={{ width: 300 }}
ref={formRef}>
<Form.Item
name="username"
initialValue=""
rules={[
{
required: true,
message: 'Please input your Username!',
},
{
min: 5, max: 10,
message: '长度不在范围内'
},
{
pattern: new RegExp('^\\w+$', 'g'),
message: '用户名必须为字母或者数字'
}
]}>
<Input
prefix={<UserOutlined />}
placeholder="请输入用户名" />
</Form.Item>
<Form.Item
name="password"
initialValue=""
rules={[
{
required: true,
message: 'Please input your Password!',
},
]}>
<Input
prefix={<LockOutlined />}
type="password"
placeholder="请输入密码" />
</Form.Item>
<Form.Item
name="remember"
valuePropName="checked"
>
<Checkbox >
记住密码
</Checkbox>
<a href="http://baidu" style={{ float: "right" }}>忘记密码</a>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit"
onClick={onCheck}>
登录
</Button>
</Form.Item>
</Form>
</Card>
</div>
)
}
本文标签: 表单AntdReactvalidateFieldsCurrent
版权声明:本文标题:React antd—current.validateFields实现登录表单校验 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1728627298a1166657.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论