好的，以下是一个简单的
Ant Design Vue 注册表单示例：
```html
<template>
<a-form ref="registerForm" :form="form" @submit="handleSubmit">
<a-form-item label="用户名" :colon="false" :rules="[requiredRule]">
<a-input v-model="form.username" />
</a-form-item>
<a-form-item label="密码" :colon="false" :rules="[requiredRule, passwordRule]">
<a-input-password v-model="form.password" />
</a-form-item>
<a-form-item label="确认密码" :colon="false" :rules="[requiredRule, { validator: confirmPasswordValidator }]">
<a-input-password v-model="form.confirmPassword" />
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit">注册</a-button>
</a-form-item>
</a-form>
</template>
<script>
import { defineComponent } from '
vue';
import { Form, Input, Button } from '
ant-
design-
vue';
export default defineComponent({
components: {
'a-form': Form,
'a-form-item': Form.Item,
'a-input': Input,
'a-input-password': Input.Password,
'a-button': Button,
},
data() {
return {
form: {
username: '',
password: '',
confirmPassword: '',
},
requiredRule: {
required: true,
message: '该项为必填项',
trigger: 'blur',
},
passwordRule: {
min: 6,
max: 20,
message: '密码长度为6-20位',
trigger: 'blur',
},
};
},
methods: {
handleSubmit() {
this.$refs.registerForm.validate(valid => {
if (valid) {
// 注册逻辑
}
});
},
confirmPasswordValidator(rule, value,
callback) {
if (value !== this.form.password) {
callback(new Error('两次输入的密码不一致'));
} else {
callback();
}
},
},
});
</script>
```
在这个示例中，我们使用了
Ant Design Vue 中的 `a-form`, `a-form-item`, `a-input`, `a-input-password` 和 `a-button` 组件来构建注册表单。我们定义了一个 `form` 对象来存储用户输入的数据，并且定义了两个校验规则 `requiredRule` 和 `passwordRule`。在提交表单时，我们调用 `validate` 方法来进行表单校验，如果表单校验通过则执行注册逻辑。同时，我们还定义了一个自定义的校验函数 `confirmPasswordValidator` 来验证确认密码是否与密码相同。
6622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
