数据校验插件开发实例 · vue笔记

[TOC] >[success] # 数据校验插件开发实例我希望对表单的数据做一个校验，下面通过 **2种方式进行校验** >[success] ## mixin校验数据 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数据校验插件开发实例</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return { name: 'dell', age: 28 } }, rules: { age: { validate: age => age > 25, message: '太年轻了' }, name: { validate: name => name.length >= 4, message: 'name长度必须大于等于4' } }, template: ` <div>{{name}}, age: {{age}}</div> ` }) // 对数据做校验的插件 app.mixin({ created(){ // 初始化 for(let key in this.$options.rules){ const item = this.$options.rules[key] // age改变时，对实例的内容做监控 this.$watch(key, (value) => { const result = item.validate(value) if(!result) console.log(item.message) }) } } }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## plugin校验数据单独写一个 **mixin可读性差** ，如果放入到 **plugin中可读性强** ，建议使用 **plugin** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数据校验插件开发实例</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return { name: 'dell', age: 28 } }, rules: { age: { validate: age => age > 25, message: '太年轻了' }, name: { validate: name => name.length >= 4, message: 'name长度必须大于等于4' } }, template: ` <div>{{name}}, age: {{age}}</div> ` }) // const validatorPlugin = { // install(){ // } // } // 之前用install中写逻辑，其实也可以像下面这样，写成箭头函数的形式 // 定义插件 const validatorPlugin = (app, options) => { // 对数据做校验的插件 app.mixin({ created(){ // 初始化 for(let key in this.$options.rules){ const item = this.$options.rules[key] // age改变时，对实例的内容做监控 this.$watch(key, (value) => { const result = item.validate(value) if(!result) console.log(item.message) }) } } }) } // 注册插件 app.use(validatorPlugin) const vm = app.mount('#root') </script> </html> ~~~