关于数据的格式验证(不限于表单)

2018-06-23  本文已影响14人  Young_Kind

网上关于数据验证的主要都是基于表单,而且很多是跟JQ结合,个人不太喜欢,最近写vue项目比较多,基于vue的数据验证插件也不少,但没vue也不能用起来,耦合性太强,自己还是喜欢自定义性比较高的风格。
下面是自己封装的代码,还不算是完整的插件,但已经可以用起来了

想要达到的目的有:

目前完成情况:


使用方式:

在需要使用的文件中引入verification.js文件

 import {getData} from '@/libs/verification'

    let T=getData(待验证的数据,{
        msg:'自定义报错的文字',
        Regular:/^[0-9]*$/, // 自定义正则表达式
        callback:function (errMsg) {  //自定义处理报错的结果
          console.log(errMsg)
        }
      })
   let F=getData(待验证的数据,{
        Type:['required','password'],, //内嵌验证类型
        callback:function (errMsg) {  //自定义处理报错的结果
          console.log(errMsg)
        }
      })
  //返回值是true/false

注意:内嵌类型和自定义正则表达式,两种方式不能都缺失,需要2选1,即Regular和Type这个参数2选1


下面是核心代码:verification.js

/**
 *  Data:待验证的数据
 *  config:验证规则配置
 * */
export function verify(Data = null, config = {}) {

  if (Data == null) {
    throw new Error('验证数据不能为空');
    return false
  }

  if (!(config.Type || null) && !config.Regular) {
    throw new Error('参数Type与参数Regular不能同时为空');
    return false
  }


  //自带规则验证
  if (config.Type) {
    return ownType(Data, config)
  }

  //自定义规则验证
  if (config.Regular) {
    if (!config.Regular.test(Data)) {
      showError(config.msg || '请输入正确格式', config.callback)
      return false
    }
  }

  return true//上面没提前返回false,则最后这里返回true

}


/*内嵌验证类型匹配*/
function ownType(Data, config) {
  for (let item of config.Type) {
    if (ownTypeList[item]) {
      if (!ownTypeList[item](Data, config)) {
        return false
        break;
      }
    } else {
      throw new Error(item + '不是内嵌验证类型');
      return false
      break;
    }
  }
  //执行完毕,什么都不需要返回,有格式不对才返回false
}


/*统一的告警提示语*/
function showError(errMsg, callback) {
  if (!callback) {
    console.log(errMsg)
  } else {
    callback(errMsg);
  }
}

let ownTypeList = {
  /*内嵌验证类型-必填*/
  required: function (Data, config) {
    let errMsg = '内容不能为空';
    let regu = "^[ ]+$";
    let re = new RegExp(regu);
    if (re.test(Data)) {
      showError('不能输入空格', config.callback)
      return false
    }

    if (Data === '' || Data === undefined || Data === null) {
      showError(errMsg, config.callback)
      return false
    }
    return true
  },
  /*内嵌验证类型-邮件格式*/
  Email: function (Data, config) {
    let errMsg = '请输入正确的邮件格式'
    let pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    if (pattern.test(Data)) {
      return true
    } else {
      showError(errMsg, config.callback)
      return false
    }
  },
  /*内嵌验证类型-手机电话格式*/
  phone: function (Data, config) {
    let errMsg = '请输入正确的手机号码格式'
    let pattern = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
    if (pattern.test(Data)) {
      return true
    } else {
      showError(errMsg, config.callback)
      return false
    }
  },
  password: function (Data, config) {
    let errMsg = '密码格式:字母开头,长度在6~18之间,只能包含字母、数字和下划线'
    let pattern = /^[a-zA-Z]\w{5,17}$/;
    if (pattern.test(Data)) {
      return true
    } else {
      showError(errMsg, config.callback)
      return false
    }
  },
}


上一篇 下一篇

猜你喜欢

热点阅读