antd多个表单元素相互触发校验(最大值最小值校验)

两个及以上的表单元素需要相互验证并且都有自己的判断条件及提示信息该怎么做呢?

场景:
最大值: 需大于最小值
最小值: 需小于最大值
(1)代码:render中表单元素

                 <Form.Item
                    name="creditStartRange"
                    rules={[
                      { required: true, message: '请输入最小值' },
                      { validator: minValueFn }
                    ]}
                  >
                    <InputNumber
                      min={1}
                      style={{ width: '100%' }}
                      placeholder="请输入最小值"
                      onClick={() => {
                        changeValueType('creditStartRange');
                      }}
                    />
                  </Form.Item><Form.Item
                    name="creditEndRange"
                    rules={[
                      { required: true, message: '请输入最大值' },
                      { validator: maxValueFn },
                    ]}
                  >
                    <InputNumber
                      min={1}
                      style={{ width: '100%' }}
                      placeholder="请输入最大值"
                      onClick={() => {
                        changeValueType('creditEndRange');
                      }}
                    />
               </Form.Item>
                  

(2)校验规则函数

//当前操作的表单元素存进useState中
  const [formType, setFormType] = useState('');
  
//注意:当前操作的表单元素和进行验证的表单元素不能为同一个,否则会陷入死循环  
//最小值函数
  const minValueFn = (rule: any, value: string, callback: any) => {
    const { getFieldValue, validateFields } = form;
    const maxValue = getFieldValue('creditEndRange');
    if (value != null && value !== '') {
      if (maxValue != null && maxValue !== '' && value >= maxValue) {
        callback('最小值需小于最大值');
      }
    }
    if (formType === rule.field) {
      validateFields(['creditEndRange']);
    }
    callback();
  };
  //最大值函数
  const maxValueFn = (rule: any, value: string, callback: any) => {
    const { getFieldValue, validateFields } = form;
    const minValue = getFieldValue('creditStartRange');
    if (value != null && value !== '') {
      if (minValue != null && minValue !== '' && value <= minValue) {
        callback('最大值需大于最小值');
      }
    }
    if (formType === rule.field) {
      validateFields(['creditStartRange']);
    }
    callback();
  };
  //当前操作的表单元素
  const changeValueType = (valueType: string) => {
    setFormType(valueType);
  };

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于antd多个表单校验,你可以使用antd提供的Form组件来实现。以下是一个示例代码,演示了如何在一个表单中进行多个字段的校验: ```jsx import React from 'react'; import { Form, Input, Button } from 'antd'; const DemoForm = () => { const [form] = Form.useForm(); const onFinish = (values) => { console.log('Form values:', values); }; const validateUsername = (_, value) => { // 在这里编写用户名校验逻辑 if (value !== 'admin') { return Promise.reject('用户名不正确'); } return Promise.resolve(); }; const validatePassword = (_, value) => { // 在这里编写密码校验逻辑 if (value.length < 6) { return Promise.reject('密码长度不能少于6位'); } return Promise.resolve(); }; return ( <Form form={form} onFinish={onFinish}> <Form.Item name="username" label="用户名" rules={[{ validator: validateUsername }]}> <Input /> </Form.Item> <Form.Item name="password" label="密码" rules={[{ validator: validatePassword }]}> <Input.Password /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit">提交</Button> </Form.Item> </Form> ); }; export default DemoForm; ``` 在这个示例中,我们使用`Form`组件来创建一个表单,并通过`form`属性和`useForm`钩子函数创建了一个表单实例。在表单中的每个字段都可以通过`Form.Item`组件来包裹,并通过设置`name`属性指定字段的名称。 在`rules`属性中,我们可以通过传递一个包含校验逻辑的对象来进行字段的校验。在示例中,我们分别为用户名和密码字段定义了自定义的校验函数`validateUsername`和`validatePassword`。这些校验函数接收两个参数:第一个参数是当前字段的值,第二个参数是一个回调函数,可以用于异步校验。如果校验通过,我们需要调用回调函数的`resolve`方法;如果校验失败,我们需要调用回调函数的`reject`方法,并传递一个错误信息。 最后,我们可以通过设置`onFinish`属性来指定表单提交时的回调函数,其中的`values`参数包含了表单中所有字段的值。 这样,当用户填写表单并点击提交按钮时,antd会自动按照我们定义的校验逻辑进行校验,并在校验失败时显示错误信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值