关于if多种情况的问题?

淋着
  • 274

当这个三个下拉框时,当都存在值时,才能不触发表单验证
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()
},
回复
阅读 1.4k
6 个回答
✓ 已被采纳
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()
}

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

// 测试数据源,考虑到多数 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);
请选择元素组合、敏感分级和敏感分类

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

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

宣传栏