el-form表单校验失效，检测不到输入内容

大家都一样

已于 2022-11-02 09:23:26 修改

阅读量2k

点赞数

分类专栏： element-ui-bug 文章标签： vue.js elementui javascript

于 2022-11-01 16:18:10 首次发布

本文链接：https://blog.youkuaiyun.com/m0_48390697/article/details/127635718

版权

当Vue.js结合ElementUI的el-form进行表单验证时，可能会遇到校验失效，无法检测到输入内容的问题。分析表明，问题可能源于数据绑定不正确或者rules中的属性名不一致。解决方法包括确保:model正确使用，同时ruleForm、rules及prop的属性名保持一致。在el-form与el-dialog结合做数据回显时，若仍有问题，可以尝试利用$nextTick来处理回显数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分析

检测不到输入内容，很可能是没绑上，尤其是已经输入内容了，还是提示输入为空，这个时候一定要保证对应的数据名称都一样，以官网的例子说明一下

解决方法

el-form中是:model，而不是v-model
:model中rulesForm的值和rules里的名字以及prop的值都一样，比如ruleForm.name、prop="name"、rules.name这三个名字都是name，这几个不一样会出问题。

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="