您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
AntDesign的Form.Item组件的validateStatus属性用于设置表单项验证状态的样式,常用的取值有’success’、‘warning’、‘error’和’validating’,分别表示验证通过、警告、错误和验证中。以下是使用validateStatus属性的示例代码:
import { Form, Input, Button } from 'antd';
const MyForm = () => {
const onFinish = (values) => {
console.log('Received values:', values);
};
return (
<Form
name="basic"
initialValues={{ remember: true }}
onFinish={onFinish}
>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
validateStatus="success"
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
validateStatus="error"
help="Password is required"
>
<Input.Password />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
export default MyForm;
在上面的示例中,我们分别为用户名和密码输入框设置了不同的验证状态。用户名输入框的validateStatus属性设置为’success’,表示验证通过;密码输入框的validateStatus属性设置为’error’,表示验证出错,并且通过help属性设置了错误提示信息。通过设置validateStatus属性,可以直观地展示表单项的验证状态,提高用户体验。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。