AntDesign、ArcoDesign触发表单校验的几种方式

AntDesign、ArcoDesign触发表单校验的几种方式

1.htmlType="submit"方式

2.借助上下文调用submit实现

3.通过ref方式

4.通过form={fomr}方式 (给Form加配置项)

import React, { useRef } from "react";
import {
  Form,
  AutoComplete,
  Input,
  Select,
  TreeSelect,
  Button,
  Checkbox,
  Switch,
  Radio,
  Cascader,
  Message,
  InputNumber,
  Rate,
  Slider,
  Upload,
  DatePicker,
  Modal,
} from "@arco-design/web-react";

function App() {
  const [visible, setVisible] = React.useState(false);
  const FormItem = Form.Item;
  const formRef = useRef();
  const [fomr] = Form.useForm();

  return (
    <div>
      <Button onClick={() => setVisible(true)} type="primary">
        Open Modal
      </Button>
      {/* 表单校验 */}
      <Modal
        title="Modal Title"
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        autoFocus={false}
        focusLock={true}
      >
        <Form ref={formRef} form={fomr}>
          <FormItem
            label="Username"
            field="name"
            required
            rules={[
              {
                validator(value, cb) {
                  if (!value) {
                    return cb("探测任务为必选项");
                  }
                  console.log(value, "dsfsddfs");
                  return cb();
                },
              },
            ]}
          >
            <Input placeholder="please enter..." />
          </FormItem>
          <FormItem>
            {/*  1.htmlType="submit"方式 */}
            <Button type="primary" htmlType="submit">
              999
            </Button>
          </FormItem>
          <FormItem>
            {/* 2.借助上下文调用submit实现 */}
            <Button
              type="primary"
              onClick={() => {
                fomr.submit();
                console.log(fomr, "sd");
              }}
            >
              submi
            </Button>
          </FormItem>
          <FormItem>
            {/* 3.通过ref方式 */}
            <Button
              onClick={async () => {
                try {
                  await formRef.current.validate();

                  Message.info("校验通过，提交成功！");
                } catch (_) {
                  console.log(formRef.current.getFieldsError());
                  Message.error("校验失败，请检查字段！");
                }
              }}
              type="primary"
              style={{ marginRight: 24 }}
            >
              Submit
            </Button>
          </FormItem>
          <FormItem>
            {/* 4.通过form={fomr}方式 */}
            <Button
              onClick={async () => {
                try {
                  await fomr.validate();
                  Message.info("校验通过，提交成功！");
                } catch (_) {
                  console.log(fomr.getFieldsError());
                  Message.error("校验失败，请检查字段！");
                }
              }}
              type="primary"
              style={{ marginRight: 24 }}
            >
              3333
            </Button>
          </FormItem>
        </Form>
      </Modal>
    </div>
  );
}

export default App;