Elenment UI表单验证时，有值但还是提示错误，表单验证失效问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了Elenment UI表单验证时，有值但还是提示错误，表单验证失效问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Elenment UI表单验证时，有值但还是提示错误，表单验证失效问题

下午在用Element UI写一个表单的时候突然发现，表单的验证规则失效了

使用Element自带的表单校验规则时，表单为空的时候下方有提示信息，表单不为空的时候依然有提示信息

Elenment UI表单验证时，有值但还是提示错误，表单验证失效问题

查看资料找到几种方式都不管用

一种是检查<el-form-item>中的prop值和<el-input>的v-model的值是否一致，这里是保持一致的但还是不行

<el-form ref="emailForm" v-model="Form" :rules="rules">
  <el-form-item label="用户名" prop="userName" label-width="200px" style="width: 70%">
      <el-input v-model="Form.userName" clearable placeholder="请输入用户名"/>
   </el-form-item>
 </el-form>

另外一种是检查<el-form>标签里v-model和 :rules与data里的数据是否保持一致,检查之后没有错，但还是不行

    rules: {
        userName  : [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      }

最后，从头到尾仔细看了一遍之后突然发现<el-form>中的v-model有问题，正确的用法应该是:model，修改之后发现表单果然变正常了

经过一番研究发现:model和v-model的区别

:model 是v-bind:model的缩写，这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。当然引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的。文章来源地址https://www.toymoban.com/news/detail-510300.html

到了这里，关于Elenment UI表单验证时，有值但还是提示错误，表单验证失效问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！