vue非空校验函数

作者： Daniel_yanm

今天给大家分享一款，我在实际开发项目中经常用到的非空校验函数，话不多说，直接上菜。。。

先搞一个基于element message的提示窗，方便快速使用。

import { Message } from 'element-ui'
export function elementMessage (t, msg) {
  Message({
    type: t,
    message: msg
  })
}

再来弄个基础的判断非空并设置提示语

/**
 * 判断非空并设置提示语
 * @param {*} val 参数
 * @param {*} msg 提示语
 * @param {*} msgType 提示语类型，参考element message方法
 * @returns Boolean
 */
function setMessage (val, msg, msgType) {
  if (!isEmpty(val)) {
    elementMessage(msgType, msg)
    return false
  } else {
    return true
  }
}

接着搞一个生成器函数

不太了解生成器函数的参考下这里：developer.mozilla.org/zh-CN/docs/…

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

通过递归分段执行函数，这里起名叫做分段函数

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

/**
 * 非空校验函数
 * @param {Array} arr 入参数组
 * @param {*} cb 回调
 */
export function checkIsEmptys (arr, cb) {
  // Generator 函数需要调用一次才能执行（后面通过 next 执行）。
  var bool = verify(arr)
  doNext(bool, cb)
}

使用

import { elementMessage, checkIsEmptys } from '@/utils/util'

// { value: 参数, msg: 提示语, msgType: 提示语类型 }
var arr = [
  { value: this.form.acceptCode, msg: '请输入受理编号', msgType: 'error' },
  { value: this.form.reportCode, msg: '请输入报告编号', msgType: 'warning' },
  { value: this.form.certCode, msg: '请输入证书编号', msgType: 'warning' },
  { value: this.form.prodName, msg: '请输入产品名称', msgType: 'warning' },
  { value: this.form.prodModeName, msg: '请输入产品型号', msgType: 'warning' },
  { value: this.form.saleRegion, msg: '请输入主销区域', msgType: 'warning' }
]
checkIsEmptys(arr, () => {
  console.log('校验成功，已没有非空参数')
})

util.js 全部代码

import { Message } from 'element-ui'
export function isEmpty (v) {
  if (typeof v === 'undefined' || v === null || v === '') {
    return false
  } else {
    return true
  }
}
export function elementMessage (t, msg) {
  Message({
    type: t,
    message: msg
  })
}
/**
 * 判断非空并设置提示语
 * @param {*} val 参数
 * @param {*} msg 提示语
 * @param {*} msgType 提示语类型，参考element message方法
 * @returns Boolean
 */
function setMessage (val, msg, msgType) {
  if (!isEmpty(val)) {
    elementMessage(msgType, msg)
    return false
  } else {
    return true
  }
}
var verify = function * (arr) {
  console.log(arr)
  for (var i = 0; i < arr.length; i++) {
    yield setMessage(arr[i].value, arr[i].msg, arr[i].msgType)
  }
  // Generator 函数需要return之后才算真正结束
}

// 通过递归执行分段函数
function doNext (bool, cb) {
  // 先执行第一个分段函数
  var x = bool.next()
  if (x.value) {
    // 当 value 值为 true 时（也就是非空的时候），再执行下一个分段函数
    doNext(bool, cb)
  } else {
    if (x.done && cb) {
      // 分段函数执行完毕之后执行回调
      cb()
    }
  }
}
/**
 * 非空校验函数
 * @param {Array} arr 入参数组
 * @param {*} cb 回调
 */
export function checkIsEmptys (arr, cb) {
  // Generator 函数需要调用一次才能执行（后面通过 next 执行）。
  var bool = verify(arr)
  doNext(bool, cb)
}

打完收工！！！