數據校驗插件開發實例 · 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> ~~~