vue 验证用户名不能为空_vue表单验证你真的会了吗？vue表单验证（form）validate...

前言

很久没有写文章了，学习了一下webpack，基础的一些组件，今天带来form表单验证组件(element.iviewui)的一期教程(作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示 (QQ群技术讨论)838293023备注(github进来的

效果图

1.原理解释

考虑

我们看一下我们可以用form去整体触发校验也可以单个input来触发form-item 进行校验 童鞋们现在可能感觉还是没懂，没关系继续往下看。

2.派发和广播

为什么要用广播和派发呢。通常我们和业务没有关系的组件尽量不要使用vuex和bus(事件总线)。 下面我送上广播和派发的代码。我们在需要调用组件绑上 this.$on('event',res=>()) ，通过派发和广播进行调用 $emit 。

派发是向上查找且只调用1个

广播是向下查找调用多个

注意⚠️所有的组件都要写上name

通过混合器 mixins 来使用

emitter.js

/**

* 递归使用 call 方式this指向

* @param componentName // 需要找的组件的名称

* @param eventName // 事件名称

* @param params // 需要传递的参数

*/

function broadcast(componentName, eventName, params) {

// 循环子节点找到名称一样的子节点 否则 递归 当前子节点

this.$children.map(child=>{

if (componentName===child.$options.name) {

child.$emit.apply(child,[eventName].concat(params))

}else {

broadcast.apply(child,[componentName,eventName].concat(params))

}

})

}

export default {

methods: {

/**

* 派发 (向上查找) (一个)

* @param componentName // 需要找的组件的名称

* @param eventName // 事件名称

* @param params // 需要传递的参数

*/

dispatch(componentName, eventName, params) {

let parent = this.$parent || this.$root;//$parent 找到最近的父节点 $root 根节点

let name = parent.$options.name; // 获取当前组件实例的name

// 如果当前有节点 && 当前没名称 且 当前名称等于需要传进来的名称的时候就去查找当前的节点

// 循环出当前名称的一样的组件实例

while (parent && (!name||name!==componentName)) {

parent = parent.$parent;

if (parent) {

name = parent.$options.name;

}

}

// 有节点表示当前找到了name一样的实例

if (parent) {

parent.$emit.apply(parent,[eventName].concat(params))

}

},

/**

* 广播 (向下查找) (广播多个)

* @param componentName // 需要找的组件的名称

* @param eventName // 事件名称

* @param params // 需要传递的参数

*/

broadcast(componentName, eventName, params) {

broadcast.call(this,componentName, eventName, params)

}

}

}

3.async-validator

不懂 async-validator 可以去官网看看 github