composables封装一个表单验证组合式函数,可以帮助管理表单的验证状态,包括验证规则、错误消息等,有.ts和.vue文件
时间: 2024-10-10 14:15:13 浏览: 40
Composables在Vue.js中是一种模块化的解决方案,它们是轻量级、独立的函数或对象,用于复用功能如表单验证。通过`composables`,你可以创建一个专门处理表单验证的自包含组件,比如`formValidation.ts`和`form-validation.vue`。
`formValidation.ts`(通常是`.ts`因为TS支持静态类型检查)可能会长这样:
```typescript
import { defineRuntimeComponent } from 'vue';
export default defineRuntimeComponent({
setup() {
// 定义验证规则和默认值
const rules = {
fieldA: { required: true },
fieldB: { min: 5 }
};
const values = {};
// 验证函数
const validate = (data: any) => {
Object.entries(data).forEach(([key, value]) => {
if (!rules[key] || !rules[key].test(value)) {
return false;
}
});
return true;
};
// 触发验证并更新错误状态
const handleSubmit = async (e: Event) => {
e.preventDefault();
const isValid = validate(values);
console.log(isValid); // 这里可以添加显示错误信息或阻止提交的逻辑
};
// 返回验证相关的props和事件处理器
return {
rules,
values,
handleSubmit,
};
}
});
```
而在`.vue`文件中,你将使用这个`formValidation` composable:
```html
<template>
<form @submit.prevent="handleSubmit">
<label v-for="(rule, key) in rules" :key="key">
{{ key }}: <input v-model="values[key]" :validity="{ valid: rule.test(values[key]) }">
<span class="error" v-if="!rule.test(values[key])">{{ rule.message }}</span>
</label>
<button type="submit">Submit</button>
</form>
</template>
<script>
import FormValidation from '@/components/formValidation.vue';
export default {
components: {
FormValidation,
},
};
</script>
```
阅读全文