跳到主要内容

表单中子表单重复校验

本案例来自三方开发者「Peng」

1. 使用场景

本例介绍一下在宜搭表单页面中如何实现子表单重复校验。

2. 实现功能

2.1 创建表单页面

2.3 将下述代码拷贝至页面 JS 中

注意修改下述唯一标识。

(1)子表单单字段重复校验

// 子表单单字段重复校验
export function validateRuleOneField(value) {
const tableFieldId = 'tableField_l9nwtxmy'; // 子表单组件唯一标识
const fieldId = 'textField_l9nwtxmz'; // 需要校验组件唯一标识
const tableValue = this.$(tableFieldId).getValue()
.map(item => item[fieldId])
.filter(item => !item == "");
const valueSet = new Set(tableValue)
return tableValue.length === valueSet.size;
}

(2)子表单多字段组合重复校验

// 子表单多字段组合重复校验
export function validateRuleManyFields(value) {
const tableId = 'tableField_l9nmw8iy'; // 子表单组件唯一标识
const idList = ['textField_l9nmw8iz', 'numberField_l9nmw8j0']; // 需要校验组件唯一标识
const tableValue = this.$(tableId).getValue()
.filter(row => {
// 多字段任意一个为空则跳过行
for (const id of idList) {
if ('' + row[id] === '') {
return false;
}
}
return true;
})
.map(row => {
//当前行要校验的值拼接一个字符串
let str = '';
idList.forEach(id => str += row[id]);
return str;
});
//利用Set去重
const valueSet = new Set(tableValue);
// console.log(tableValue)
// console.log(valueSet)
//如果长度相等则证明没有重复的
return tableValue.length === valueSet.size;
}

2.4 使用方式

(1)子表单单字段重复校验

在对应组件的自定义函数中调用即可。

function validateRule(value) {
return this.validateRuleOneField(value);
}

(2)子表单多字段组合重复校验

需要组合校验的组件都需要在自定义函数中调用。

function validateRule(value) {
return this.validateRuleManyFields(value);
}

3. 实现效果

4. 在线试玩

Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4