element-ui el-input / el-select输入框的非空校验

一、之前写的实现

直接js判断就可以 

.prevent .stop 是阻止继续冒泡  不一样的 

见 官方说明 1 https://cn.vuejs.org/v2/cookbook/form-validation.html#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%A1%E9%AA%8C

2 自定义 （我没看）https://juejin.im/post/5d28787e6fb9a07f06559a64

3 https://www.jb51.net/article/146419.htm 这个网址很好  我的项目里面就这样写的 

 next() {

      this.$refs["firmForm"].validate(valid => {

        if(!valid)

          console.log("表单填写不完整  不通过");

        else 

          this.active++;

      });

     // this.$refs['firmForm'].clearValidate();

    },

===========================================

根据 链接3 的 介绍 写了一个判断

然后发现有一丢丢的小问题   嗯 一个很坑的bug

先看代码  prop那里 需要和v-model 是一样的  

不然获取不到。。。一直说空  这边有点不清不楚的。qwq 

html

js

二、后面发现select的问题

先说明，测试给 的bug，前端可以打回。

原型图不需要，或者无需更改。正常产品原型图上会比较详细到这种细节

 
element-ui里

之前发过的校验，原来是 element -ui里面自带的。

而且 可以补message 不必写个长长的函数（但是只能校验非空。可以一起用）前面那个check  是检查空的 也可以与别的

如果只是检查非空的话可以方便一点

如果写required：true的话前面有星号，可以不写，直接一起用一个validation。

  rules2: {  

        accountOpeningBranch:[{validator: checkUnempty2, message: '开户支行不能为空！',trigger: "blur"}],

      }

发现我使用搜索引擎的效率真的好低。qwq。所以多问问还是有必要的，在你最终知道之前

el-option里面

qwq。 这个 难怪你搜不到。叫做vue elementUI 表单校验（多层嵌套）

我在谷歌搜的是 el-form-item  下三个model 如何正则校验

好。先看看~回来补

结果qwq  我写了两个小时 没有解决这个问题!!!!!！！！什么鬼啊

 

是这样的  多重校验其实还好 见  https://www.okcode.net/article/40176 用下面那个方法

但是 问题是 blur不生效 但是校验的时候submit会校验出来，也会触发原生非空事件，本来还好，但是红色框框不会自动消失。

那么用trigger:  change  这个的问题则是 选了第一个 就告诉你没选全  因为触发change 了

..................................................................

搜索的大概要select  blur无效/? 我 的心好累

校验其实倒是好说 可以在需要call back的 const函数里面乱搞。 qwq。

关于测试那些问题我觉得完全可以加一些什么小字段校验。什么submit 了之后 某个地方true  然后巴拉巴拉

 

可是何必呢qwq? 流程里面一堆bug

anyway，不具有探索精神的我，玩游戏喜欢集齐图鉴而不是把装备做到最好_(:з」∠)_

掰掰，改流程bug去了