关于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()
},
回复
阅读 530
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()
}

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏