表单验证封装集成到项目中
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("手机号码有误");
对于老生常谈的验证 我想网上随抓一大把 博主分享的这篇文档希望对于初,中级小伙伴有个管理概念 , 再开中管理自己的代码以及管理自己的项目 不仅是对自己的负责也是对他人的负责。 谢谢大家
相关文章推荐
- 封装表单验证解决一站式项目需求
- 项目中常用封装方法(信息提示、权限验证、数据连接验证)
- 第一百四十九节,封装库--JavaScript,表单验证--验证用户名
- springboot实际项目:日志打印、表单验证、异常处理
- 第一百五十一节,封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全
- smart gwt做项目时,做表单验证用到的
- flex中验证表单项目合法性并给予友好提示
- 使用JavaScript进行表单必填项目验证和改进
- 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法,日期转换和前台显示格式之间,还有JSON取日期数据格式转换成标准日期格式的问题
- JS封装常用表单验证
- Flex中验证表单项目合法性并给予友好提示
- 不错的JQuery屏幕居中提示信息封装,使用方便,可集成到项目
- 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放
- js正则表单验证(trim封装)
- 实用前端JS工具类(验证,AJAX请求封装,分页插件等)真实项目使用
- Java表单验证封装类
- 介绍Web项目中用到的几款表单验证插件
- 第一百五十四节,封装库--JavaScript,表单验证--提交验证
- Android之表单验证,Validation三方集成。
- 最近项目有一个验证身份证号是否有效的需求,封装了一个工具类。