【VUE】表单验证-
对象已经赋值 输入框提示为空解决。表单内嵌套table 多选后数据已更新,但验证一直为空
·
1.对象已经赋值 输入框提示为空解决
在方法中已经给这个输入框绑定的属性值赋值后,提交仍然提示不能为空,其实数据已经更新到对象里了,只是页面没有渲染。
使用
this.$forceUpdate();
进行强制更新,发现并不起作用,于是考虑到diff算法,可以通过定义key,当值发生变化是使Vue判断数据变化进而更新页面数据。
实现方法:
<el-form-item
:label="输入框label名"
prop="propVlue"
:key="timer" //添加key值
>
<el-input
v-model="form.xxx"
clearable
class="form-item-box"
:disabled="true"
>
</el-input>
</el-form-item>
在修改值的方法中添加:
this.timer = new Date().getTime();
2.表单内嵌套table 多选后数据已更新,但验证一直为空
el-form中嵌套el-table 在列表中进行多选,先不多选数据,触发校验后再选择数据 再提交时一直提示不能为空
<el-form
ref="addForm"
:model="form"
:rules="rules"
label-width="80px"
label-position="top"
>
<el-row :gutter="30" class="diaLogFormArea">
<el-col :xs="8" :sm="8" :md="6" :lg="6">
<el-form-item label="选择数据" prop="Code">
<el-select v-model="form.Code">
<el-option
v-for="item in codeSelect"
:key="item.labelValue"
:label="item.labelText"
:value="item.labelValue"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="设备选择" prop="deviceIds">
<el-row :gutter="30">
<el-table
ref="deviceListTable"
:data="deviceListData"
@selection-change="handleSelectionChange"
max-height="300px"
>
<el-table-column
type="selection"
width="220"
align="center"
prop="select"
:selectable="selected"
>
</el-table-column>
<template v-for="(item, index) in deviceColumns">
<el-table-column
:key="index"
:index="index"
:label="item.label"
align="center"
:prop="item.prop"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<template v-if="item.render">
<span>
<RenderDom
:row="scope.row"
:index="index"
:render="item.render"
/>
</span>
</template>
<template v-else>
<span>{{ scope.row[item.code] }}</span>
</template>
</template>
</el-table-column>
</template>
</el-table>
</el-row>
</el-form-item>
</el-form>
data() {
const validateSelect = (rule, value, callback) => {
if (this.form.deviceIds.length < 1) {
callback(new Error('不能为空'));
} else {
callback();
}
};
return {
form: {
Code: undefined,
deviceIds: [],
},
rules: {
deviceIds: [
{
required: true,
trigger: 'change',
validator: validateSelect,
},
],
},
}
}
// 新增页面- 设备多选
handleSelectionChange(val) {
this.multipleSelection = [];
val.forEach((item) => {
this.multipleSelection.push(item.deviceId);
});
this.form.deviceIds = this.multipleSelection;
},
通过自定义验证规则,并在rules中绑定即可
3.判断指定el-form-item是否已通过校验
给指定form-item添加ref
<el-form-item label="labelText" prop="itemProp" ref="inputRef">
<el-input
v-model.number="form.ipaidSn"
/>
</el-form-item>
添加方法判断,可在@blur或@input中添加
chackeInputStatus() {
if (this.$refs.inputRef.validateState !== 'error') {
//校验通过
} else {
//校验未通过
}
},
4.手动触发指定字段的验证(验证通过后自动取消红色边框)
// validateField方法第一个参数可以为Array或者String,定义需要校验的字段
this.$refs['formName'].validateField(["resource"], (valid) => {
if (!valid) {
// 校验通过后的操作
alert("校验通过");
} else {
console.log("校验失败");
return false;
}
});
4.字段rules设置多个trigger
itemName: [
{
required: true,
message: '此项不能为空',
trigger: ['blur', 'change'],
},
],
更多推荐
已为社区贡献8条内容
所有评论(0)