ZBLOG

validateStatus怎么用的

validateStatus 是 Ant Design 中 Form.Item 组件的一个属性,用于指示表单项的验证状态。可以通过设置这个属性来控制表单项的视觉反馈,例如显示错误或成功样式。

validateStatus 的常用值

  • ‘success’: 表示验证通过,样式将变为成功状态(通常是绿色)。
  • ‘warning’: 表示验证存在警告,样式会有警告效果。
  • ‘error’: 表示验证失败,样式会显示为错误状态(通常是红色)。
  • undefined: 没有验证信息,使用默认样式。

示例代码

下面是一个完整的例子,展示了如何在 Ant Design 的表单中使用 validateStatus

  1. import React from 'react';
  2. import { Form, Input, Button } from 'antd';
  3. const MyForm = () => {
  4. const [form] = Form.useForm();
  5. const onFinish = (values) => {
  6. console.log('Received values:', values);
  7. };
  8. return (
  9. <Form form={form} onFinish={onFinish}>
  10. <Form.Item
  11. label="每单可选物品上限:"
  12. name="goodsLimit"
  13. validateTrigger="onBlur"
  14. validateStatus={
  15. form.getFieldError('goodsLimit').length > 0 ? 'error' : undefined
  16. }
  17. help={form.getFieldError('goodsLimit').length > 0 ? form.getFieldError('goodsLimit')[0] : ''}
  18. rules={[
  19. { required: true, message: '请输入每单可选物品上限' },
  20. {
  21. validator: (_, value) => {
  22. if (!value || (value >= 1 && value <= 99)) {
  23. return Promise.resolve();
  24. }
  25. return Promise.reject(new Error('请输入1~99之间的整数'));
  26. },
  27. },
  28. ]}
  29. >
  30. <Input type="number" placeholder="请输入1~99之间的整数" />
  31. </Form.Item>
  32. <Form.Item>
  33. <Button type="primary" htmlType="submit">
  34. 提交
  35. </Button>
  36. </Form.Item>
  37. </Form>
  38. );
  39. };
  40. export default MyForm;

如何工作的

  1. 获取错误信息:我们使用 form.getFieldError('goodsLimit') 来检查该字段是否存在错误。如果返回的数组长度大于 0,则表示有错误。
  2. 设置 validateStatushelp 属性
    • 当存在错误时,我们将 validateStatus 设置为 'error',这将使输入框呈现错误样式。
    • 同时,通过 help 属性显示具体的错误消息。

总结

使用 validateStatus 可以提供更灵活和直观的用户体验,使用户能够及时了解他们输入的数据是否有效。这种方式特别适用于需要即时反馈的场景,比如实时校验用户输入。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=19110

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?