vue3自定义表单校验规则
时间: 2023-07-03 10:11:11 浏览: 88
在Vue3中,可以通过使用自定义校验函数来验证表单字段。下面是一个简单的示例:
1. 首先,在组件中定义一个自定义校验函数,例如:
```javascript
const myValidator = (value) => {
// 在此处编写自定义校验逻辑
if (value.length < 6) {
return "密码长度不能少于6位";
}
return true;
};
```
2. 然后,在表单控件中添加 `v-model` 指令,并使用 `v-bind` 绑定一个自定义校验函数:
```html
<template>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" v-bind:validate="myValidator"/>
<div v-if="errors.password">{{ errors.password }}</div>
</div>
</template>
```
3. 最后,在组件中使用 `watch` 监听表单控件的值变化,并在自定义校验函数中调用 `this.$emit` 触发一个自定义事件(例如 `validate`),以便在父组件中处理校验结果:
```javascript
<script>
export default {
data() {
return {
password: "",
errors: {}
};
},
methods: {
myValidator(value) {
if (value.length < 6) {
this.$emit("validate", { field: "password", error: "密码长度不能少于6位" });
return false;
}
this.$emit("validate", { field: "password", error: null });
return true;
}
},
watch: {
password(value) {
this.myValidator(value);
}
},
created() {
this.$on("validate", ({ field, error }) => {
this.errors[field] = error;
});
}
};
</script>
```
这样,当用户输入密码时,自定义校验函数会在每次密码变化后自动执行,并将校验结果通过自定义事件 `validate` 传递给父组件,父组件再根据结果更新错误提示信息。