前言

在PC端项目中，经常会遇到新增或修改保存功用单据页面，一般由表单（header）、表体（body）、脚部（footer）三部分组成。脚部包括多个保存按钮，如存草稿、保存。但是，点击这些按钮并不立即触发接口恳求，而是需求前端进行静态校验。只要在静态校验通往后，才会触发接口恳求并执行后续逻辑。针对这种场景，咱们需求考虑如何简化繁琐的静态校验流程。

场景

  • 头部必填项校验：

类型、编号、日期

  • 表体校验必填项校验：

表体列表没有 有用值校验
表体列表数据哪项不为空就金额字段是否有值进一步校验

咱们模拟了一个稍微不算杂乱的场景，咱们先按照咱们的正常操作完成，运用vue2为例，template 咱们略去

<script>
export defalt {
    data(){
        return {
            form:{
                type:'',
                code:'',
                date:null
            },
            // 生成30条 空数据
            list :Array.from({length: 30},(_,i)=>{
                return {
                    rowNum: i + 1,
                    money:'',
                    name:''
                }
            })
        }
    },
    methods:{
        // 静态校验
        vaild(){
            if(!this.form.type){
                alert('请挑选类型')
                return false
            }else if(!this.form.code){
                 alert('请输入编号')
                 return false
            } else if(!this.form.date){
                 alert('请挑选日期')
                 return false
            } else if(!this.list.filter(i=>i.name !== '').length){
                 alert('表体没有有用数据，无法保存！')
                 return false
            } else if(!(this.list.filter(i=>i.name !== '').every(i=>i.money))){
                 alert('有用数据对应的金额没有输入')
                 return false
            } 
            return true
        },
        // 存草稿
        draft(){
            if(this.vaild()){
                // 调用保存草稿的接口
            }
        },
        // 保存
        save(){
            if(this.vaild()){
                // 调用保存的接口
            }
        }
    }
}
</script>

在我遇到的杂乱项目中，vaild 部分的代码最多有几百行代码校验，最少十来行代码，其实咱们这种优化只要在较为杂乱的前端静态校验才干体现出优势，针对以上场景事例，咱们重点是优化 静态校验vaild函数里边的校验代码，使其愈加易于维护

计划

咱们首先编写一个同步校验多个条件的函数，来支撑咱们的优化

/**
 * @description 同步验证多个条件函数
 * @param { Array } vaildList 验证列表
 * @param { Object } commonParamMap 公共参数对象
 * @param { Function } errCallBack 错误时的回调
 * @returns function
 */
function syncCheck(vaildList = [], commonParamMap = {}, errCallBack){
    return function (successCallBack){
        let ret = null
        for (let i = 0; i < vaildList.length; i++) {
            const item = vaildList[i]
            if( typeof item === 'function'){
                const result = item(commonParamMap)
                if(result) {
                    ret = result
                    break
                }
            }
        }
        if(ret){
            errCallBack && errCallBack(ret)
        } else {
            successCallBack && successCallBack()
        }
    }
}

示例

示例运用vue2为例

<script>
export defalt {
    data(){
        return {
            form:{
                type:'', // 类型
                code:'', // 编号
                date:null // 日期
            },
            // 生成30条 空数据
            list :Array.from({length: 30},(_,i)=>{
                return {
                    rowNum: i + 1,
                    money:'',
                    name:''
                }
            })
        }
    },
    mounted () {
     // 保存前的校验函数
     this.vaildBeforeSave = syncCheck(
     // 校验函数数组。从上往下依次校验，哪个校验回来错位信息就终止，带着错误提示信息走到错误处理函数
     [
         ({ type })=>{
             if(!type()) return '请挑选类型'
         },
         ({ code })=>{
             if(!code()) return '请输入编号'
         },
         ({ date })=>{
             if(!date()) return '请挑选日期'
         },
         ({ list })=>{
             if(!list().filter(i=>i.name !== '').length) return '表体没有有用数据'
         },
         ({ list })=>{
             if(list().filter(i=>i.name !== '').every(i=>i.money))) {
                 return '有用数据对应的金额没有输入'
             }
         }
     ],
     // 校验函数数组 内部需求解构的数据，在这儿进行映射，校验函数需求什么就解构什么
     {
         type:()=>this.form.type,
         code:()=>this.form.code,
         date:()=>this.form.date,
         list: ()=> this.list
     },
     // 校验列表数组一旦有错误信息回来，则会进入到这儿。并回来对应的错位提示信息
     (errMsg)=>{
         alert(errMsg)
     })
    },
    methods:{
        // 存草稿
        draft(){
            this.vaildBeforeSave(()=>{
                 // 调用保存草稿的接口
            })
        },
        // 保存
        save(){
            this.vaildBeforeSave(()=>{
                 // 调用保存的接口
            })
        }
    }
}
</script>

咱们经过 同步验证多个条件函数 syncCheck 把校验条件、校验函数需求的变量、校验不经过的处理进行有用的组织起来，形成一条有用且可易于维护的线路，达到咱们的化繁为简

结语

咱们项目中出现该场景的情况仍是比较多的，期望对大家有用，如有疑问，欢迎留言，有更好的 idea，欢迎一同讨论，感谢

24年往期文章：
前端 同时屡次调用同个接口，如何只触发一次而不是触发屡次
前端 页面不同组件内调用相同接口导致重复调用，如何只触发一次而不是触发屡次