vue3 form rules验证
时间: 2024-10-18 15:14:19 浏览: 24
在 Vue3 中,`form-rules`通常是配合 `v-model` 和 `v-bind:class` 以及一些验证库(如 `vuelidate`、`vue-validator` 或官方的 `@/hooks/useForm`)来实现表单验证的。这里是一个基本的例子:
```html
<template>
<div>
<form @submit.prevent="handleSubmit">
<input v-model="form.username" type="text" :class="{ error: hasError('username') }" placeholder="用户名" :rules="{ required: true, message: '请输入用户名', trigger: 'blur' }">
<input v-model="form.explain" type="text" :class="{ error: hasError('explain') }" placeholder="解释" :rules="{ required: true, message: '请输入解释', trigger: 'blur' }">
<button type="submit">提交</button>
<span v-if="form.errors && form.errors.username">{{ form.errors.username }}</span>
</form>
</div>
</template>
<script>
import { useForm } from '@vue/composition-api';
export default {
setup() {
const { field, resetFields, handleSubmit } = useForm();
// 定义验证规则
const rules = {
username: { required: true, message: '请输入用户名', trigger: 'blur' },
explain: { required: true, message: '请输入解释', trigger: 'blur' },
};
// 验证方法
const hasError = (field) => field.touched && !field.valid;
return {
form: field,
handleSubmit,
resetFields,
hasError,
};
},
};
</script>
```
在这个例子中,我们使用了 `useForm`钩子来管理表单数据和验证状态。每个输入字段都有一个对应的验证规则,当用户输入改变(`trigger: 'blur'`)或者表单提交时,会自动触发验证。如果有错误,错误信息会被保存在 `form.errors` 中,并根据条件在页面上显示。
相关问题:
1. 如何在Vue3中安装并引入form验证库?
2. 在Vue3中如何自定义更复杂的验证逻辑?
3. 怎么处理多个字段同时验证的情况?
阅读全文