文章目录
一、问题介绍
在使用from表单时,当我们设置他的规则relus
时,会发现,表单的label左边会出现一个*
号
代码如下:
import React, { FC, useCallback } from 'react'
import { Form, Input, Checkbox, Button } from 'antd'
import styles from './login.module.scss'
interface Props {}
const Login: FC<Props> = (): JSX.Element => {
const handleOnFinish = useCallback((value: any) => {
console.log(value)
}, [])
return (
<div className={styles['login-div']}>
<h1>用户登录</h1>
<Form
className={styles['login-div__form']}
onFinish={handleOnFinish}
layout="inline"
>
<Form.Item
label="邮箱"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item name="remember" valuePropName="checked">
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
登录
</Button>
</Form.Item>
</Form>
<div className={styles['message']}>
<p>
没有账号? <a href="/register">点击创建</a>.
</p>
</div>
</div>
)
}
export default Login
展示如下:
label左边有一个*号
二、如何去掉*
号
- 直接修改rules
<Form.Item
label="邮箱"
name="username"
rules={[{ required: false, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
结果如下:
可以看到邮箱字段已经没有 *号
但是这样会影响表单的校验规则,当输入为空,且提交会发现没有对输入进行校验
2. 不影响校验规则的情况下,去掉*号
使用reauire
代码如下
<Form.Item
label="邮箱"
name="username"
required={false} //使*号不展示
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>