表单里面明明有正确的输入,但是一直无法通过验证,并且提示输入内容,但是console能显示数据。
原因:
1:v-model的字段名,prop字段名和rules中的字段名必须一致!
2:表单与v-model是否正确绑定!
3:如果data中的form中包含对象,那么rules中的验证规则也需要和form一致!!!
我的是第3中情况,以下是参考代码:
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
<el-row> <el-col :span="12"> <el-form-item label="用户昵称" prop="sysUser.nickName"> <el-input v-model="form.sysUser.nickName" placeholder="请输入用户昵称" maxlength="30" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="归属部门" prop="deptId"> <treeselect v-model="form.sysUser.deptId" :options="deptOptions" :normalizer="normalizer" :show-count="true" placeholder="请选择归属部门" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="手机号码" prop="sysUser.phonenumber"> <el-input v-model="form.sysUser.phonenumber" placeholder="请输入手机号码" maxlength="11" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="邮箱" prop="sysUser.email"> <el-input v-model="form.sysUser.email" placeholder="请输入邮箱" maxlength="50" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item v-if="form.sysUser.userId == undefined" label="用户名称" prop="sysUser.userName"> <el-input v-model="form.sysUser.userName" placeholder="请输入用户名称" maxlength="30" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item v-if="form.sysUser.userId == undefined" label="用户密码" prop="sysUser.password"> <el-input v-model="form.sysUser.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/> </el-form-item> </el-col> </el-row>
</el-form>
form:{ postIds:[], roleIds:[], sysUser:{ userId: null, deptId: 100, userName: null, nickName: null, password: null, phonenumber: null, email: null, sex: "0", status: "0", remark: null, } },
rules: { sysUser:{ nickName: [{required: true, message: '请输入用户名', trigger: 'blur'}, { min: 2, max: 10, message: '用户昵称长度 2 到 10 个字符', trigger: 'blur' } ], phonenumber: [ { required: false, message: '', trigger: 'blur' }, { pattern: /^$|^[1][3,4,5,6,7,8,9][0-9]{9}$/, min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' } ], email: [ { required: false, message: '', trigger: 'blur' }, { pattern: /^$|^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/, min: 5, max: 15, message: '请输入正确的邮箱', trigger: 'blur' } ], userName: [{required: true, message: '请输入用户名', trigger: 'blur'}, { min: 2, max: 10, message: '用户名长度 2 到 10 个字符', trigger: 'blur' } ], password: [{required: true, message: '请输入密码', trigger: 'blur'}, { min: 6, max: 15, message: '密码长度在 6 到 15 个字符', trigger: 'blur' } ], } },