Antd 不会自动验证表单字段,但可以使用 Antd 提供的 Form 组件和校验规则来实现表单字段的验证。以下是一个示例:
import React from 'react';
import { Form, Input, Button } from 'antd';
const App = () => {
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
};
const validateUsername = (rule, value, callback) => {
if (value && value.length < 5) {
callback('Username should be at least 5 characters');
} else {
callback();
}
};
return (
);
};
export default App;
在上面的代码中,我们使用了 Form
组件来包裹表单字段,并通过设置 name
属性和 rules
属性来定义字段的验证规则。在提交表单时,可以通过 onFinish
方法获取表单的值,并在 onFinishFailed
方法中处理验证失败的情况。同时,我们还定义了一个自定义验证函数 validateUsername
来验证用户名的长度是否满足要求。
这样,当用户点击提交按钮时,Antd 会自动触发表单字段的验证,并根据验证结果显示错误信息。
上一篇:Antd 表格水平滚动