您的位置:首页 > 其它

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

2017-11-02 15:53 405 查看

项目中文件划分

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



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

公有及私有资源的管理与分类,是我们后期在开发中的重点方向:

如何管理?

如何设计文件层级?

如何设计文档?

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

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

先上验证代码

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

* 匹配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("手机号码有误");


对于老生常谈的验证 我想网上随抓一大把 博主分享的这篇文档希望对于初,中级小伙伴有个管理概念 , 再开中管理自己的代码以及管理自己的项目 不仅是对自己的负责也是对他人的负责。 谢谢大家
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息