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>
    

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

  • 相关阅读:
    洛谷 1850 NOIP2016提高组 换教室
    2018牛客多校第三场 C.Shuffle Cards
    2018牛客多校第一场 B.Symmetric Matrix
    2018牛客多校第一场 A.Monotonic Matrix
    2018牛客多校第一场 D.Two Graphs
    2018宁夏邀请赛L Continuous Intervals
    2018宁夏邀请赛K Vertex Covers
    BZOJ
    HDU
    ACM International Collegiate Programming Contest, Egyptian Collegiate Programming Contest (ECPC 2015)
  • 原文地址:https://www.cnblogs.com/liuqin-always/p/12559139.html
Copyright © 2011-2022 走看看