前提条件:vue-cli创建一个项目,安装async-validator(npm i async-validator -S)
-
在components中新建FormTest.vue组件,并在App.vue中引入。
一个form表单需要form、formItem、input,初步代码如下:
formTest:<template> <div> form表单 <hr /> <k-form> <k-form-item label="用户名"> <k-input v-model="model.username"></k-input> </k-form-item> <k-form-item label="密码" prop="password"> <k-input type="password" v-model="model.password"></k-input> </k-form-item> </k-form> </div> </template> <script> import KForm from "./KForm.vue" import KInput from "./KInput.vue" import KFormItem from "./KFormItem.vue" export default { components: { KForm, KInput, KFormItem }, data() { return { // 数据模型 model: { username: "tom", password: "" }, } }, } </script> <style> </style>
input:
<template> <div> <input :type="type" :value="value"> </div> </template> <script> export default { props: { type: { type: String, default: "text" }, value: { type: String, default: "" } }, methods: { } }; </script> <style> </style>
formItem:
<template> <div> <label v-if="label">{{label}}</label> <!-- 插槽 --> <slot></slot> <!-- 校验错误信息 --> <p v-if="errorMessage" class="error">{{errorMessage}}</p> </div> </template> <script> // import Validator from "async-validator"; export default { props: ["label"], data() { return { errorMessage: '', } } }; </script> <style scoped> .error { color: red; } </style>
form:
<template> <div> <slot></slot> </div> </template> <script> export default { }; </script> <style> </style>
- 在input中定义input事件,通知老爹发生了input事件
this.$emit("input", e.target.value);
我们在KForm中使用provide,将表单实例跨层级传递给子孙
provide() { return { form: this // 表单实例传递给后代 } }, props: { model: { type: Object, required: true }, rules: { type: Object } },
这样我们可以在form标签上使用model(数据模型)、 rules(校验规则)。
我们在KFormItem中实行校验,在KInput中通知父组件进行校验:
this.$parent.$emit("validate")
KFormItem组件中监听validate,
import Validator from "async-validator"
created() { this.$on("validate", this.validate) }, methods: { validate() { // 执行校验函数 } }
我们使用 async-validator 的校验规则写validate,我们用jnject注入KForm传过来的form实例
inject: ["form"]
// 校验规则制定 const descriptor = { [this.prop]: this.form.rules[this.prop] }; // 创建校验器 const validator = new Validator(descriptor); // 执行校验 validator.validate( { [this.prop]: this.form.model[this.prop] }, errors => { if (errors) { // 显示错误信息 this.errorMessage = errors[0].message; resolve(false); } else { this.errorMessage = ""; resolve(true); } } );
完成验证,上面为学习代码,
具体代码:https://github.com/wwjhzc/asyncValidator - 在input中定义input事件,通知老爹发生了input事件