在项目中用到ElementUI的表单验证时,发现离开焦点后获取的输入框内容是空的,表示就是获取不到输入的字段。
以下是官网给出的表单验证的步骤和相关的代码。这是上半部分的。
script部分的代码如下:
重点来了:在仔细检查后发现,element-ui的表单校验规则中,el-form-item绑定的prop必须和该item下的表单元素绑定的v-model值的名称一致。也就是我把formData里的属性名改成和rules里的属性名一致就可以了!!!但是,在官网中并没有说到这个名字需要一致的问题。
官网的使用规则是这样的:
在这贴上我部分的代码:
<el-dialog title="提示" :visible.sync="modiDialog" width="80%" :before-close="handleClose" >
<el-form :model="ruleForm" label-width="100px" :rules="rules">
<el-form-item label="用户姓名" prop="modiName">
<el-input placeholder="请输入姓名" v-model="ruleForm.modiName"></el-input>
</el-form-item>
<el-form-item label="密码" prop="modiPassword">
<el-input placeholder="请输入密码" v-model="ruleForm.modiPassword" show-password></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="ruleForm.sex">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="modiDialog = false">取 消</el-button>
<el-button type="primary" @click="modiDialog = false">确 定</el-button>
</span>
</el-dialog>
script部分的:
export default {
data() {
return {
ruleForm: {
// 定义修改的数据
modiName : '',
modiPassword : '',
sex: '',
},
tableData: [],
delName: '',
modiDialog : false,
//表单验证
rules:{
modiName:[
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
],
modiPassword:[
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
],
sex: [
{ required: true, message: '请选择性别', trigger: 'change' }
],
}
}
以上,虽然问题不大,但是找了挺久的bug就当记录一下,下次就知道避免这个坑了。