vue3 form中的rules绑定怎么写
时间: 2024-10-17 07:11:15 浏览: 15
在 Vue3 中,Form 组件通常会配合 Element UI 或者 VeeValidate 这样的表单验证库使用。`rules` 属性用于定义字段级别的验证规则。以下是一个基本的例子:
```html
<template>
<el-form :model="form" ref="formRef">
<!-- 表单输入项 -->
<el-form-item label="邮箱">
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
<el-form-item-error slot="inline-message">{{ errors.email }}</el-form-item-error>
</el-form-item>
<!-- ... 其他表单元素 -->
</el-form>
</template>
<script>
import { defineComponent, Ref } from 'vue';
import { validate } from 'vee-validate';
export default defineComponent({
setup(props, context) {
const form = reactive({ email: '' });
const formRef = Ref(null);
// 使用 VeeValidate 的 validate 函数绑定 rules
validate(formRef.value, {
rules: {
email: { required: true, type: 'email', message: '请输入有效的邮箱地址' },
},
fields: {
email: {
// 如果需要自定义验证方法,可以在fields上设置validate函数
validate: (value) => value.includes('@'),
},
},
});
onMounted(() => {
// 验证初始化
formRef.value.validate();
});
return {
form,
formRef,
};
},
});
</script>
```
在这个例子中,`rules` 对象定义了 `email` 字段的验证规则,如必需 (`required`) 和电子邮件格式 (`type: 'email'`)。如果验证失败,错误信息会被显示在 `el-form-item-error` 标签内。
如果你使用的是自定义的验证库或者其他验证策略,规则的写法可能会有所不同,但大体原理都是将验证规则绑定到表单组件的数据模型上。
阅读全文