vue+element动态增减表单项并实现校验
场景:在表单中实现动态增减经纬度,参考element给我们提供了一个动态增减表单项的例子核心代码如下// template中的代码<el-form-itemv-for="(item, index) in editForm.lonLat":label="'第' + Number(index+1)+ '组经纬度'":key="index"...
场景:在表单中实现动态增减经纬度,参考element给我们提供了一个动态增减表单项的例子
核心代码如下
// template中的代码
<el-form-item
v-for="(item, index) in editForm.lonLat"
:label="'第' + Number(index+1)+ '组经纬度'"
:key="index"
:prop="'lonLat.' + index + '.lonLat'"
:rules="addLonLatRules"
class="one-line-label"
>
<el-input
v-model="item.lonLat"
class="input" /><el-button
size="mini"
@click.prevent="removeLonLat(item)">删除</el-button>
</el-form-item>
// 动态新增表单的验证规则
addLonLatRules: [{ trigger: 'blur', validator: validateLonLat }],
// 动态添加项目经纬度
addLonLat() {
this.editForm.lonLat.push({
lonLat: ''
});
},
// 删除动态添加的经纬度输入框
removeLonLat(item) {
let index = this.editForm.lonLat.indexOf(item);
if (index !== -1) {
this.editForm.lonLat.splice(index, 1);
}
},
如果想要限制必填,就在addLonLatRules里面添加上,如下:
// 动态新增表单的验证规则
addLonLatRules: [
{ trigger: 'blur', validator: validate.validateLonLat },
{ required: true, message: '请输入经纬度', trigger: 'blur' }//经纬度必填
],
需要注意的是动态增减表单项的校验
正常的单项表单校验用的是prop,而动态生成的表单要用:props
prop书写的语法是:
:prop="‘v-for绑定的数组.’ + index + ‘.v-model绑定的变量’",:prop是拼接的形式,前面是v-for绑定的数组,中间是数组索引index,最后是表单项绑定的v-model的名称,然后用点.把它们连接起来。这三项都必须保证正确,错一个都无法验证。
如下:
:prop="'lonLat.' + index + '.lonLat'"
还有一个需要注意就是v-for的写法,要将表单的model名写进去
v-for="(item, index) in editForm.lonLat"//editForm就是表单的model名
element上的校验只是提供了非空校验,如下
比如我这个需求,需要规定 ‘经度,纬度’ (11.23,12.56)这种格式的数据,所以必须自定义校验规则
要实现行内自定义校验,如果这样写:rules: “{validator: validateA, trigger: ‘blur’}”,然后在data里面定义validateA 的校验规则,会报错提示会提示validateA是undefined。
解决如下:
在data里面定义经纬度校验的规则:
// 经纬度格式验证
let validateLonLat = (rule, value, callback) => {
let LONLAT_REG = /^[1-9][0-9]{0,2}(\.[0-9]{1,9}),[1-9][0-9]{0,2}(\.[0-9]{1,9})?$/;
if (value) {
if (!LONLAT_REG.test(value)) {
callback(new Error('请输入有效的经纬度'));
return;
}
}
callback();
};
// 动态新增表单的验证规则
addLonLatRules: [{ trigger: 'blur', validator: validateLonLat }],
然后在template里面的表单里进行如下书写
这样就完成了动态增减表单项并自定义校验。
更多推荐
所有评论(0)