关于if多种情况的问题？

Question

当这个三个下拉框时，当都存在值时，才能不触发表单验证

触发表单验证

如果这么写，感觉太蠢了，还有什么其他方法吗？

validator(rule,value,callback) => {
    let errormsg = ''
    if(value[0].value == null || value[0].value == undefined){
        errormsg = '请选择元素组合'
    } 
    if(value[1].value == null || value[0].value == undefined){
        errormsg = '请选择敏感分级'
    } 
    if(value[2].value == null || value[0].value == undefined){
        errormsg = '请选择敏感分类'
    } 
    if(
       (value[0].value == null || value[0].value == undefined) 
       && (value[1].value == null || value[0].value == undefined)
    ){
        errormsg = '请选择元素组合和敏感分级'
    } 
    if(
       (value[0].value == null || value[0].value == undefined) 
       && (value[2].value == null || value[2].value == undefined)
    ){
        errormsg = '请选择元素组合和敏感分类'
    } 
    if(
       (value[1].value == null || value[1].value == undefined) 
       && (value[2].value == null || value[2].value == undefined)
    ){
        errormsg = '请选择敏感分级和敏感分类'
    } 
    if(
      (value[0].value == null || value[0].value == undefined) 
      && (value[1].value == null || value[1].value == undefined)
      && (value[2].value == null || value[2].value == undefined)
    ){
       errormsg = '请选择元素组合、敏感分级和敏感分类'
    } 
    if(errormsg){
       return callback(new Error(errormsg))
    }
    callback()
},

Answer 1

let ms = ['元素组合', '敏感分级', '敏感分类']
let errormsg = value.reduce((res,item,index)=>{
    item.value == null && res.push(ms[index])
    return res
},[]).join('和')
if(errormsg){
    return callback(new Error('请选择' + errormsg))
}

Answer 2

普通下拉框直接加上 required 属性，提交表单的时候浏览器会自动验证。

Answer 3

其实不用提示的那么详细，因为没选的已经变成红色框了

validator(rule,value,callback) => {
 [value[0].value, value[1].value, value[2].value].some(item => !!item) ? callback(new Error('请选择')) : callback()
}

Answer 4

每次只检测并提示一个未填项就行了，让用户根据提示集中精力去处理一个框，而不是让他们挨个处理。
三个必填还好，很多场合有十几乃至几十个，开发者拼字符串也难，用户读起来也很难。
甚至可以只提示“带*的为必填项”。

Answer 5

// 测试数据源，考虑到多数 input 只支持返回字符串
// 所以不应该只判断 null 和 undefined，还有 ""
const value = ["", "", ""];
// const value = ["1", "2", "3"];
// const value = ["1", "", "3"];
// const value = ["", "", "3"];

// 做一个名称表，和值对应。这里是「序号⇔值」映射表，而且有序，所以用数组
const names = ["元素组合", "敏感分级", "敏感分类"];

// 把无效的数组过滤出来，注意要按序号取名字
const invalidNames = value
    // 过滤前就需要把对应的名字取出来，所以先 map
    .map((v, i) => [v, names[i]])
    // 再过滤
    .filter(([v]) => (v ?? "") === "")
    // 最后通过 map 只把名字取出来
    .map(([, name]) => name);

// 如果 invalidName 的长度为 0 表示没有无效数据，message 直接置 ""
// 否则产生有效的 message 信息
const message = invalidNames.length
    // 用字符串模板语法来组合，
    // 考虑到多个无效，连用“和”不符合汉语语法，
    // 使用顿号连接，最后一个顿号用正则表达式改为“和”
    ? `请选择${invalidNames.join("、").replace(/、(?=[^、]+$)/, "和")}`
    : "";

// 最后根据 message 的情况决定是否使用它
console.log(message);

请选择元素组合、敏感分级和敏感分类

Answer 6

你可以参照某些第三方组件库的思路搞一个规则验证，比如vuetify的表单，输入框可根据需要传入rules来自动做验证。