<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'}
  ]
}

如下图所示:

Logo

前往低代码交流专区

更多推荐