Vue 数据校验

使用 插件 和 mixin进行数据校验

• 使用mixin 进行数据校验

<script>

// plugin 插件  数据校验
    // 创建 vue实例
   const app = Vue.createApp({
    data() {
        return{
            name:'dell',
            age: 28
        }
    },

    methods: {
        handleClick() {
            this.show = !this.show;
        }
    },

    // 数据校验 age
    rules: {
        age: {
            validate: age => {
                return age > 25
            },
             message: '太年轻了'
        },
        name: {
            validate: name => {
                return name.length > 4
            },
             message: '名字太短了'
        }
    },

    template:  `
    <div>
        {{name}}
        {{age}}
    </div>
    
   `
    });

    // 使用mixin 进行数据校验
    app.mixin({
        created() {
            for (let key in this.$options.rules) {
                const item = this.$options.rules[key];
                this.$watch(key, (value)=> {
                    const result = item.validate(value);
                    if (!result) console.log(item.message);
                }) 
            }
        }
    })

    const vm = app.mount('#root');
    
</script>

使用 插件+ mixin进行数据校验

<script>

// plugin 插件  数据校验
    // 创建 vue实例
   const app = Vue.createApp({
    data() {
        return{
            name:'dell',
            age: 28
        }
    },

    // 数据校验 age
    rules: {
        age: {
            validate: age => {
                return age > 25
            },
             message: '太年轻了'
        },
        name: {
            validate: name => {
                return name.length > 4
            },
             message: '名字太短了'
        }
    },

    template:  `
    <div>
        {{name}}
        {{age}}
    </div>
    
   `
    });

    // 使用插件进行数据校验
    const validatorPlugin = {
        install (app, options) {
            // 使用mixin 进行数据校验
            app.mixin({
                created() {
                    for (let key in this.$options.rules) {
                        const item = this.$options.rules[key];
                        this.$watch(key, (value)=> {
                            const result = item.validate(value);
                            if (!result) console.log(item.message);
                        }) 
                    }
                }
            })
        }
    }

    // 使用插件
    app.use(validatorPlugin);

    const vm = app.mount('#root');
    
</script>