vue+element-ui validator 有值任然提示不能为空的问题所在

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

<el-form :model="registerUser" :rules="rules2" ref="registerForm" label-width="80px"
         class="registerForm">
    <el-form-item label="用户名" prop="username2">
        <el-input v-model="registerUser.username" placeholder="请输入用户名"></el-input>
    </el-form-item>
</el-form>

rules2: {
  username2: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min:2,max:20,message:'长度在2到20个字符之间',trigger:'blur'}
  ]
}

以上代码运行时 不论用户名输入什么都会提示“请输入用户名”，这是应为不论你输入什么根本就没有取到值，原因是prop参数设置不一致导致。prop的参数应该设置为model.key的值，不能随意取名，此处prop应为：prop="username"

<el-form :model="registerUser" :rules="rules2" ref="registerForm" label-width="80px"
         class="registerForm">
    <el-form-item label="用户名" prop="username">
        <el-input v-model="registerUser.username" placeholder="请输入用户名"></el-input>
    </el-form-item>
</el-form>

rules2: {
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min:2,max:20,message:'长度在2到20个字符之间',trigger:'blur'}
  ]
}

如下图所示：

以上是 vue+element-ui validator 有值任然提示不能为空的问题所在 的全部内容， 来源链接： utcz.com/z/378142.html

回到顶部