表单验证封装集成到项目中

项目中文件划分

举例来说项目的划分大致如下:

这里写图片描述

对于一个开发者来说 项目的开发,功能,逻辑,技术选型 很重要。而当我么确定了我们的开始就是接下来的正式开发了。

公有及私有资源的管理与分类,是我们后期在开发中的重点方向:
如何管理?
如何设计文件层级?
如何设计文档?

良好的开发习惯会使我们接下来的工作事半功倍。也方便一起工作的小伙伴们阅读与理解。

好了 扯了这么多 开始我们正式的主题

先上验证代码

下列代码可直接拷贝到个人公有资源中去

 * 匹配Email地址
 */
const isEmail = (str) => {
  if (str == null || str == "") return false;
  var result = str.match(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/);
  if (result == null) return false;
  return true;
}

/**
 * 只能输入数字[0-9]
 */
const isDigits = (str) => {
  if (str == null || str == "") return false;
  var result = str.match(/^\d+$/);
  if (result == null) return false;
  return true;
}

/**
 * 匹配money
 */
const isMoney = (str) => {
  if (str == null || str == "") return false;
  var result = str.match(/^(([1-9]\d*)|(([0-9]{1}|[1-9]+)\.[0-9]{1,2}))$/);
  if (result == null) return false;
  return true;
}

/**
 * 匹配phone
 */
const isPhone = (str) => {
  if (str == null || str == "") return false;
  var result = str.match(/^1[34578]\d{9}$/);
  if (result == null) return false;
  return true;
}

/**
 * 匹配mobile
 */
const isMobile = (str) => {
  if (str == null || str == "") return false;
  var result = str.match(/^((\(\d{2,3}\))|(\d{3}\-))?((13\d{9})|(15\d{9})|(18\d{9}))$/);
  if (result == null) return false;
  return true;
}

/**
 * 联系电话(手机/电话皆可)验证   
 */
const isTel = (text) => {
  if (isMobile(text) || isPhone(text)) return true;
  return false;
}

/**
 * 匹配qq
 */
const isQq = (str) => {
  if (str == null || str == "") return false;
  var result = str.match(/^[1-9]\d{4,12}$/);
  if (result == null) return false;
  return true;
}

/**
 * 匹配english
 */
const isEnglish = (str) => {
  if (str == null || str == "") return false;
  var result = str.match(/^[A-Za-z]+$/);
  if (result == null) return false;
  return true;
}

/**
 * 匹配integer
 */
const isInteger = (str) => {
  if (str == null || str == "") return false;
  var result = str.match(/^[-\+]?\d+$/);
  if (result == null) return false;
  return true;
}

/**
 * 匹配double或float
 */
const isDouble = (str) => {
  if (str == null || str == "") return false;
  var result = str.match(/^[-\+]?\d+(\.\d+)?$/);
  if (result == null) return false;
  return true;
}


/**
 * 匹配邮政编码
 */
const isZipCode = (str) => {
  if (str == null || str == "") return false;
  var result = str.match(/^[0-9]{6}$/);
  if (result == null) return false;
  return true;
}

/**
 * 匹配URL
 */
const isUrl = (str) => {
  if (str == null || str == "") return false;
  var result = str.match(/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\’:+!]*([^<>\"])*$/);
  if (result == null) return false;
  return true;
}

/**
 * 匹配密码,以字母开头,长度在6-12之间,只能包含字符、数字和下划线。
 */
const isPwd = (str) => {
  if (str == null || str == "") return false;
  var result = str.match(/^[a-zA-Z]\\w{6,12}$/);
  if (result == null) return false;
  return true;
}

/**
 * 判断是否为合法字符(a-zA-Z0-9-_)
 */
const isRightfulString = (str) => {
  if (str == null || str == "") return false;
  var result = str.match(/^[A-Za-z0-9_-]+$/);
  if (result == null) return false;
  return true;
}

/**
 * 匹配身份证号码
 */
const isIdCardNo = (num) => {  //  if (isNaN(num)) {alert("输入的不是数字!"); return false;} 

  if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(num)) {
    return false
  } else {
    return true
  }
}

/**
 * 匹配汉字
 */
const isChinese = (str) => {
  if (str == null || str == "") return false;
  var result = str.match(/^[\u4e00-\u9fa5]+$/);
  if (result == null) return false;
  return true;
}

/**
 * 匹配中文(包括汉字和字符)
 */
const isChineseChar = (str) => {
  if (str == null || str == "") return false;
  var result = str.match(/^[\u0391-\uFFE5]+$/);
  if (result == null) return false;
  return true;
}

/**
 * 字符验证,只能包含中文、英文、数字、下划线等字符。
 */
const stringCheck = (str) => {
  if (str == null || str == "") return false;
  var result = str.match(/^[a-zA-Z0-9\u4e00-\u9fa5-_]+$/);
  if (result == null) return false;
  return true;
}

/**
 * 过滤中英文特殊字符,除英文"-_"字符外
 */
const stringFilter = (str) => {
  var pattern = new RegExp("[`~!@#$%^&*()+=|{}':;',\\[\\].<>/?~!@#¥%……&*()——+|{}【】‘;:”“’。,、?]");
  var rs = "";
  for (var i = 0; i < str.length; i++) {
    rs = rs + str.substr(i, 1).replace(pattern, '');
  }
  return rs;
}

/**
 * 判断是否包含中英文特殊字符,除英文"-_"字符外
 */
const isContainsSpecialChar = (str) => {
  if (str == null || str == "") return false;
  var reg = RegExp(/[(\ )(\`)(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\+)(\=)(\|)(\{)(\})(\')(\:)(\;)(\')(',)(\[)(\])(\.)(\<)(\>)(\/)(\?)(\~)(\!)(\@)(\#)(\¥)(\%)(\…)(\&)(\*)(\()(\))(\—)(\+)(\|)(\{)(\})(\【)(\】)(\‘)(\;)(\:)(\”)(\“)(\’)(\。)(\,)(\、)(\?)]+/);
  return reg.test(str);
}

export {
  isEmail,
  isDigits,
  isMoney,
  isPhone,
  isMobile,
  isTel,
  isQq,
  isEnglish,
  isInteger,
  isDouble,
  isZipCode,
  isUrl,
  isPwd,
  isRightfulString,
  isIdCardNo,
  isChinese,
  isChineseChar,
  stringCheck,
  stringFilter,
  isContainsSpecialChar,
}

在需要使用到的文件中 引用就好:

// 类似这样
import { isPhone, isIdCardNo } from "../utils/validate";

验证的时候:

if (isIdCardNo(cardId) === false) this.showToast("身份证号有误");
else if (isPhone(e.detail.value.cellphone) === false) this.showToast("手机号码有误");

对于老生常谈的验证 我想网上随抓一大把 博主分享的这篇文档希望对于初,中级小伙伴有个管理概念 , 再开中管理自己的代码以及管理自己的项目 不仅是对自己的负责也是对他人的负责。 谢谢大家

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值