zoukankan      html  css  js  c++  java
  • element-UI里表单验证失效的问题

      最近接手了一个项目,是同事做的,我在其中新增了几个模块,后来同事做其他项目去了,这个项目就完全落到我身上了,当然,bug也都落到我身上了。

      好了,吐槽完毕开始说正事,有个bug就是修改密码时,二次密码校验失效的问题。我看代码里确实是写了表单校验,就是照着element官网上那样写的,拿到问题就开始测试,是否执行了校验函数,验证确实没有。然后百度了一些方法,有说prop和绑定的值不一样的,但是我检查了代码,绑定值确实是一致的。几经折腾发现是v-if导致的问题。

      因为一个页面里有两个表单,所以通过v-if来控制显隐,正是这样,表单无法触发校验,改为v-show就可以了。

      百度的时候看到说prop和v-modle绑定的值一定要一致,这个问题也是经常出现的,就顺便记录一下。

    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="ruleForm.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    

      总之严格按照例子上所写来,就不会错了。

  • 相关阅读:
    redis 配置文件
    mysql的join
    mysql在DOS下的操作
    Echart显示在顶端显示总数
    汇编中,BP,SP有何区别?分别怎么使用?
    汇编函数调用中bp和sp是指什么?
    汇编语言中,SP,BP ,SI,DI作用?
    我对读计算机软件专业硕士的几点看法
    磨刀不误砍柴工
    《自己动手写操作系统》读书笔记——初识保护模式
  • 原文地址:https://www.cnblogs.com/liuqin-always/p/12559139.html
Copyright © 2011-2022 走看看