element ui 表单验证不起作用

最新推荐文章于 2024-08-01 10:45:26 发布

青颜的天空

最新推荐文章于 2024-08-01 10:45:26 发布

阅读量1.3k

点赞数 1

分类专栏： Vue 文章标签： vue elementui form

本文链接：https://blog.csdn.net/a1056244734/article/details/116491582

版权

Vue 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

在使用ElementUI进行表单验证时遇到问题，表单显示有内容但仍然提示为空。问题在于`<el-form-item>`的`prop`属性与`v-model`中的字段不一致。修复方法是确保两者统一，例如都使用`userID`。同时注意，`<el-form-item>`必须包含`prop`属性以启用验证。

摘要由CSDN通过智能技术生成

今天在使用element ui做表单验证的时候遇到了问题，表单中命名有内容，element ui却始终提示不能为空，源代码如下：

<el-form
      ref='login'
      :rules='rules'
      :model='form'
      label-width='0'
      style='width:100%;'
      @keydown.enter.native='submit'
      @submit.native.prevent
    >
      <el-form-item prop='userId'>
        <el-input v-model='form.userID' placeholder='请输入用户ID' type='text' @blur='onRoleChange'></el-input>
      </el-form-item>
    </el-form>

data() {
  form: {
    userID: '',
  },
    rules: {
      userId: [
        {required: true, message: '请输入 userID', trigger: 'blur'},
        {validator: checkUserID, trigger: 'blur'},
      ],
    },
}