关于if多种情况的问题?

淋着
  • 228

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

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

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()
},
回复
阅读 531
4 个回答
✓ 已被采纳
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))
}

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

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

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

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

你知道吗?

宣传栏