vue表单验证库async-validator的使用 elementUi + form

          目前使用vue在构建登录注册页面的时候,一般都是引入elementUi的form组件.它添加了async-validator.

大幅提升了开发效率.async-validator是一个用来验证数据规则的一个库.它的github地址是https://github.com/yiminghe/async-validator   .我们可以在elementui里直接使用它.下面介绍它的使用方法.

            其实很简单,我们直接复制eui官网上的代码.早form组件里.它大概长这样儿:

下面我附上全部的代码:

这是直接复制的eui的官网代码.使用也非常简单.当然肯定要先引入eui啊.script标签里的rules是一个对象,是所有的验证规则.比如对象内的第一个

name: [

{ required: true, message: "请输入活动名称", trigger: "blur" },

{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }

],

它表示一个验证规则,数组内共两项,required: true 表示必填项.当然 你也可以更改false为非必填. message为提示的文字信息.trigger为事件类型. min和max一看就懂.不用解释了.需要说的是,它还可以填写正则.因为官网复制下来的这份代码没有这一项.如果要使用,就在数组内添加.比如添加    { pattern: /^[0-9-_]{1,11}$/, message: '联系人手机号码的格式错误!', trigger: 'blur' };  具体的信息一看就懂.也不用解释了.  总之 ,验证规则就这三项,  规则    提示信息  和  事件类型.

   然后在视图使用就更简单了.   :rules绑定验证对象. 每一项用prop绑定验证规则. 使用效果如图:

    在我没有输入信息的情况下点击立即创建  会有以下提示: