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

2021-08-19 阅读：4188 类型：前端分类：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]);