react+antd Form表单的使用、验证

2021-08-19   阅读:3462   类型:前端   分类:React    标签: React Vue

antd Form表单高性能表单控件,自带数据域管理。包含数据录入、校验以及对应样式。

例子:

import React from 'react'
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined, BarcodeOutlined } from '@ant-design/icons';

function Login(props) {
   const onFinish = (values) => {
       console.log('Success:', values);
     };
   return (
       <div className="login-box">
           <div className="login-min">
               <div className="avatar_box">
                   <img src="./logo192.png" alt="" />
               </div>
               <Form name="normal_login" className="login-form" onFinish={onFinish}>
                   <Form.Item name="username" rules={[{ required: true, message: '请输入账号' }]} className="username" >
                       <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号" size="large"/>
                   </Form.Item>
                   <Form.Item>
                       <Button type="primary" htmlType="submit" className="login-form-button" size="large">登录</Button>
                   </Form.Item>
               </Form>
           </div>
       </div>
   )
}
export default Login

表单获取值通过

const onFinish = (values) => {
  console.log('Success:', values);
};

Form 具有自动收集数据并校验的功能,但如果您不需要这个功能,或者默认的行为无法满足业务需求,可以选择自行处理数据。

动态校验规则

根据不同情况执行不同的校验规则。

<Form.Item
       {...formItemLayout}
       name="nickname"
       label="Nickname"
       rules={[
         {
           required: checkNick,
           message: 'Please input your nickname',
         },
       ]}
     >
       <Input placeholder="Please input your nickname" />
</Form.Item>

const [form] = Form.useForm();
const [checkNick, setCheckNick] = useState(false);
useEffect(() => {
form.validateFields(['nickname']);
}, [checkNick]);
腾讯云11.11上云拼团Go,2核2G3M云服务器 28元/年

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/789.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×