解决vue+ element ui 表单验证有值但验证失败问题

分手后的思念是犯贱 2021-07-26 22:39 574阅读 0赞

### 这篇文章主要介绍了vue+ element ui 表单验证有值但验证失败，本文通过实例代码给大家分享解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下 ###

一.如图：有值但是验证失败

![366e0a74722844289991876ae01b531a.png][]

二.

<el-form :model="form" :rules="rules">
        <el-form-item label="数据模板" prop="template" >
         <el-col :span="20">
            <el-input type="textarea" v-model="form.template" :rows="8" placeholder="请输入数据模板" :readonly="true" ></el-input>
         </el-col>
        </el-form-item>
    </el-form>
    export default {
    data() {
     return {
      form: {
       template: null
      }
      rules: [
       template:{required: true, message: '数据模板不能为空', trigger: 'blur'}
      ]
     }
    }
    }

<table> 
 <tbody> 
  <tr> 
   <td> <p>以上是正确的验证例子。</p> </td> 
  </tr> 
 </tbody> 
</table>

三.

目前碰到两种情况会导致验证失败，而且使用自定义验证形式的时候发现value的值为undefined：

1.prop和v-model的值名称不一致

1必须和2名称保持一致，3处的变量也需和2处的prop保持一致

![d725053b88fa9d9a90b95408d4455b08.png][]

2.在data\{\}里面没有声明变量也会导致验证失败，使获取的值value值为undefined。

![72f159b9ae311075b2f5e3126a53389b.png][]

**总结**

以上所述是小编给大家介绍的解决vue+ element ui 表单验证有值但验证失败问题

[366e0a74722844289991876ae01b531a.png]: /images/20210726/3e623f152bbc4031b6c4e629eb08c0b5.png
[d725053b88fa9d9a90b95408d4455b08.png]: /images/20210726/52b1fd9bbbf84f2487893d93c898b7c1.png
[72f159b9ae311075b2f5e3126a53389b.png]: /images/20210726/056b506924a4407c923cad348f086960.png