自己写一个Vue中的数据校验插件

 const app = Vue.createApp({
      data() {
        return { name: "hzx", age: 28 };
      },
     //自定义的语法
      rules: {
        age: {
          //自定义的函数
          validate: (age) => {
            return age > 25;
          },
         //校验失败后返回的信息
          message: "too young,too simple",
        },
        name: {
          validate: (name) => {
            return name.length >= 3;
          },
          message: "short",
        },
      },
      template: `
            <div >
              
                  {{name}},{{age}}
                   
            </div>
        `,
    });

  const validatorPlugin = (app, options) => {
      app.mixin({
        created() {
          for (let key in this.$options.rules) {
            // 让data中的 age,name的改变可以监听到
            this.$watch(key, (value) => {
              const result = item.validate(value);
              if (!result) console.log(item.message);
            });
            const item = this.$options.rules[key];
          }
        },
      });
    };
//使用插件
app.use(validatorPlugin);