点击提交按钮后是否可以跳过Ant Design表单验证

Question

提交AntD表单时(通过单击提交按钮启动(，默认情况下似乎会通过字段验证来运行。我正在跟踪每个表单字段更改的验证，所以这对我的实现来说是不必要的。

在Ant Design中提交表单时，是否有跳过/禁用表单验证的方法？

Answer 1

如果不给Button类型submit，并向按钮添加onClick方法(下面的handleSubmit(，则可以在单击按钮时处理提交，而无需自动运行表单验证。

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Input, Button, Checkbox } from "antd";
const layout = {
labelCol: {
span: 8
},
wrapperCol: {
span: 16
}
};
const tailLayout = {
wrapperCol: {
offset: 8,
span: 16
}
};
const Demo = () => {
const [form] = Form.useForm();
const handleSubmit = (e) => {
// grab form values
let form_vals = form.getFieldsValue();
// perform the rest of submit logic here...
};
return (
<Form
form={form}
{...layout}
name="basic"
initialValues={{
remember: true
}}
>
<Form.Item
label="Username"
name="username"
rules={[
{
required: true,
message: "Please input your username!"
}
]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: "Please input your password!"
}
]}
>
<Input.Password />
</Form.Item>
<Form.Item {...tailLayout} name="remember" valuePropName="checked">
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" onClick={handleSubmit}>
Submit
</Button>
</Form.Item>
</Form>
);
};

antd版本：4.10

Answer 2

AntD(4.17.0(为验证规则引入了warningOnly属性。如果设置为true，则即使违反该规则，也可以提交表单。

结果：橙色警告将显示在UI中(而不是红色错误(，表单将成功提交。

参考编号：https://codesandbox.io/s/mfm92l