开始

image.png

image.pngimage.png
image.png
希望写一个规格，对age这个字段做校验。如果age大于25 通过校验。否则不通过。
image.png
比如现在改成23
image.png
不会有任何的提示
image.png

封装插件，让vue去识别rules语法

首先不用插件的形式，用mixin
image.png

image.png
把mixin放在app后面来定义。
created初始化结束运行的声明周期函数。
image.png

image.png

this.$options表示整个vue实例的参数。打印里面的roles参数。
image.png

控制台可以打印
image.png
循环rules每一项，把key打印出来
image.png

image.png
再把key打印一下
image.png

image.png

我们可以通过this获取到vue的实例
image.png
proxy就是vue对象的实例
image.png

可以获取到实例，就可以用watch对实例上的内容做监控。监听key值也就是年龄。
image.png

image.png
用$watch
image.png

image.png
每次age发生改变了 就可以监听age的改变。
image.png
调用validate方法，看看返回的是是true还是false。如果是false就输出错误信息。
image.png
image.png

image.png

校验的应该是传入的新的值
image.png

image.png

验证name

image.png

小雨4位就提示
image.png

改成plugin的方式

更建议大家采用plugin的方式写这段验证的代码。

相当于外面套了一层
image.png
使用这个插件
image.png

image.png
image.png

这样一封装可读性更好
image.png

结束