vue中实现表单校验

前提条件：vue-cli创建一个项目，安装async-validator（npm i async-validator -S）

1. 在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>
   

   2. 在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