一、之前写的实现

直接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

<template>
 <div class="taxi-appointment-dairen">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
   <div class="dairen-input">
    <el-form-item>
     <el-input
      v-model="ruleForm.name"
      placeholder="请输入乘车人姓名（选填）">
     </el-input>
    </el-form-item>
    <i class="fa fa-user fa-2x"></i>
   </div>
   <div class="dairen-input">
    <el-form-item prop="number">
<!-- props 这里   一样 才行    qwq      -->
     <el-input
      v-model="ruleForm.number"
      placeholder="请输入乘车人手机号码">
     </el-input>
    </el-form-item>
    <i class="fa fa-mobile-phone fa-2x"></i>
   </div>
   <div class="popover-btn">
    <el-button @click="submitForm('ruleForm')" type="primary">确定</el-button>
   </div>
  </el-form>
 </div>
</template>

js

<script>
 export default {
  data () {
   var ruleNumber = (rule, value, callback) => {
    var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
    if (value === '') {
     callback(new Error('请输入乘车人手机号码'));
    } else if(!myreg.test(value)) {
     callback(new Error('请输入正确乘车人手机号码'));
    }else {
     callback();  //重点在这 如果在验证通过后不添加callback()函数在验证时是条件会为false
    }
   };
   return {
    ruleForm: {
     name: '',
     number: ''
    },
    rules: {
     number: [{ validator: ruleNumber, trigger: 'blur' }]
    }
   }
  },
  methods: {
   submitForm (formName) {
    this.$refs[formName].validate((valid) => {
     if (valid) {   //在验证通过时时不返回callback()时 这一步进不来
      console.log(valid)
     } else {
      return false
     }
    });
   }
  }
 }
</script>

二、后面发现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去了