封装一个非空校验函数

前言

不管是前端还是后端，非空校验在 Web 应用中都很常见。前端应用中，特别是调取接口数据传参时，非空校验几乎必不可少。大部分的人实现思路都是判断是否为空，空则 return 。只有一两个参数判断还好说，但是如果有很多参数需要判断，就要写很多重复的代码。本着做一个 “不多写一行重复代码” 的码农，封装出一个非空校验函数是必需的，今天就把这个方法分享给大家。如果不想看推导过程可以直接看五，直接使用。

一、判断是否为空

最普通的非空校验

//1. 写一个通用是否为空的函数
function isDefine(str) {
     if(str == null || str == '' || str == undefined || str == NaN){
         return false
     };
     return true;
}
//2. 如果为空则提示并返回
function prompt(value,msg){
if(!isDefine(value)){
       Toast.info(msg, 1);//Toast 是 antd mobile 提供的一个提示函数，测试的话可以用alert。
       return false
}else {
       return true
}
}

二、定义 Generator 函数

将分段执行函数定义在循环中

function  *verify(arr){
     for(var i=0;i<arr.length;i++){
         yield prompt(arr[i].value,arr[i].msg);
     }
     //Generator 函数需要return之后才算真正结束
     return;
    }

三、执行分段函数

通过递归执行分段函数

//通过递归执行分段函数
function doNext(bool,cb){
        //先执行第一个分段函数
        var x= bool.next();
        if(x.value){
        //当 value 值为 true 时（也就是非空的时候），再执行下一个分段函数
            doNext(bool,cb);
        }else {
            if(x.done && cb){
            //分段函数执行完毕之后执行回调
                cb();
            }
        }
    }

四、处理执行分段函数的结果

function checkParam(arr,cb){
      //Generator 函数需要调用一次才能执行（后面通过 next 执行）。
      var bool = verify(arr);
      doNext(bool,cb);
 }

五、使用函数

function getData(){
//arr 为数组，数组中对象的属性有两个，一个是需要校验的值，一个是提示的内容。
var arr = [
      {value:this.state.userName,msg:"请输入用户名"},
      {value:this.state.mobile,msg:"请输入手机号"},
      {value:this.state.smsCode,msg:"请输入验证码"}
    ]
//调用 final 函数，将 arr 数组作为该函数的第一个参数，参数非空校验完毕之后执行回调。
checkParam(arr,function () {
    console.log("校验成功，已没有非空参数")
})

六、总结

1. 封装该方式主要是利用 Generator 函数的特点，可以异步分段执行。总体思路是：
   （1）先判断参数是否非空，非空则返回true。
   （2）定义 Generator 函数将非空检验函数定义在循环里。
   （3）在递归执行分段函数时，只有为 true，才执行下一个分段函数。
   （4）当分段函数执行完毕，才去执行回调。
2. 封装出这个函数之后，以后非空校验只需要两个参数，一个是由需要校验的参数和参数为空时的提示语组成的对象集合，另一个就是回调函数了（非空检验完成之后需要执行的操作，比如调接口）。
3. 感受一下区别，显然封装过的代码量更少，而且更易维护，如果需要增加，直接在数组里面添加相关的参数和提示语即可。

（1）没有封装的非空校验：

function getData(){
if(this.state.userName == ''){
    alert("请输入用户名");
    return;
}
if(this.state.mobile== ''){
	alert("请输入手机号");
	return;
}
if(this.state.smsCode== ''){
	alert("请输入验证码");
	return;
}
console.log("校验成功，已没有非空参数")
}

（2）封装过的非空校验：

function getData(){
//arr 为数组，数组中对象的属性有两个，一个是需要校验的值，一个是提示的内容。
var arr = [
      {value:this.state.userName,msg:"请输入用户名"},
      {value:this.state.mobile,msg:"请输入手机号"},
      {value:this.state.smsCode,msg:"请输入验证码"}
    ]
//调用 checkParam 函数，将 arr 数组作为该函数的第一个参数，非空校验完毕之后执行回调。
checkParam(arr,function () {
    console.log("校验成功，已没有非空参数")
})