ant design vue中的form表单

如何实现表单验证？

在 ant design vue 中，可以使用内置的 Form 组件来实现表单验证。具体步骤如下：

1. 在表单中添加需要验证的表单项，如 Input、Select、Checkbox 等。

2. 在 Form 组件中设置 rules 属性，该属性是一个对象，用于设置表单项的验证规则。

3. 在表单项中设置 name 属性，该属性用于与 rules 中的验证规则进行匹配。

4. 在提交表单时，调用 Form 组件的 validate 方法进行表单验证，如果验证通过，则执行提交操作，否则提示用户错误信息。

示例代码如下：

<template>
<a-form :form="form">
<a-form-item label="用户名" :validate-status="form.getFieldError('username') ? 'error' : ''">
<a-input v-decorator="['username', { rules: [{ required: true, message: '请输入用户名' }] }]"/>
<a-form-item-explain v-if="form.getFieldError('username')">{{ form.getFieldError('username')[0] }}</a-form-item-explain>
</a-form-item>
<a-form-item label="密码" :validate-status="form.getFieldError('password') ? 'error' : ''">
<a-input type="password" v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }] }]"/>
<a-form-item-explain v-if="form.getFieldError('password')">{{ form.getFieldError('password')[0] }}</a-form-item-explain>
</a-form-item>
<a-form-item>
<a-button type="primary" @click="handleSubmit">提交</a-button>
</a-form-item>
</a-form>
</template>

<script>
export default {
data() {
return {
form: this.$form.createForm(this),
};
},
methods: {
handleSubmit() {
this.form.validateFields((err, values) => {
if (!err) {
// 提交表单操作
}
});
},
},
};
</script>