Vue3记录校验工具类:validata.ts

news/2024/7/25 3:35:20/文章来源:https://blog.csdn.net/qq_38004125/article/details/139121793

在vue文件使用:

import { validateNull } from '/@/utils/validata';
validateNull('需要校验的数据')

validata.ts文件:

/*** 判断是否为空* @param val 数据*/
export const validateNull = (val: any) => {if (typeof val === 'boolean') {return false;}if (typeof val === 'number') {return false;}if (val instanceof Array) {if (val.length === 0) return true;} else if (val instanceof Object) {if (JSON.stringify(val) === '{}') return true;} else {if (val === 'null' || val == null || val === 'undefined' || val === undefined || val === '') return true;return false;}return false;
};export const rule = {/*** 校验 请输入中文、英文、数字包括下划线* 名称校验*/validatorNameCn(rule: any, value: any, callback: any) {const acount = /^[\u4E00-\u9FA5A-Za-z0-9_]+$/;if (value && !acount.test(value)) {callback(new Error('请输入中文、英文、数字包括下划线'));} else {callback();}},/*** 校验 请输入大写英文、下划线* 名称校验*/validatorCapital(rule: any, value: any, callback: any) {const acount = /^[A-Z_]+$/;if (value && !acount.test(value)) {callback(new Error('请输入大写英文、下划线'));} else {callback();}},/*** 校验 请输入小写英文、下划线* 名称校验*/validatorLowercase(rule: any, value: any, callback: any) {const acount = /^[a-z_]+$/;if (value && !acount.test(value)) {callback(new Error('请输入小写英文、下划线'));} else {callback();}},/*** 校验 请输入小写英文* 名称校验*/validatorLower(rule: any, value: any, callback: any) {const acount = /^[a-z]+$/;if (value && !acount.test(value)) {callback(new Error('请输入小写英文'));} else {callback();}},/*** 校验首尾空白字符的正则表达式**/checkSpace(rule: any, value: any, callback: any) {const longrg = /[^\s]+$/;if (!longrg.test(value)) {callback(new Error('请输入非空格信息'));} else {callback();}},/*** 校验手机号*/validatePhone(rule: any, value: any, callback: any) {var isPhone = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;if (value.indexOf('****') >= 0) {return callback();}if (!isPhone.test(value)) {callback(new Error('请输入合法手机号'));} else {callback();}},/* 数字 */number(rule, value, callback) {validateFn('number', rule, value, callback, '包含非数字字符');},/* 字母 */letter(rule, value, callback) {validateFn('letter', rule, value, callback, '包含非字母字符');},/* 字母和数字 */letterAndNumber(rule, value, callback) {validateFn('letterAndNumber', rule, value, callback, '只能输入字母或数字');},/* 手机号码 */mobilePhone(rule, value, callback) {validateFn('mobilePhone', rule, value, callback, '手机号码格式有误');},/* 字母开头,仅可包含数字 */letterStartNumberIncluded(rule, value, callback) {validateFn('letterStartNumberIncluded', rule, value, callback, '必须以字母开头,可包含数字');},/* 禁止中文输入 */noChinese(rule, value, callback) {validateFn('noChinese', rule, value, callback, '不可输入中文字符');},/* 必须中文输入 */chinese(rule, value, callback) {validateFn('chinese', rule, value, callback, '只能输入中文字符');},/* 电子邮箱 */email(rule, value, callback) {validateFn('email', rule, value, callback, '邮箱格式有误');},/* URL网址 */url(rule, value, callback) {validateFn('url', rule, value, callback, 'URL格式有误');},regExp(rule, value, callback) {if (validateNull(value) || value.length <= 0) {callback();return;}const pattern = new RegExp(rule.regExp);if (!pattern.test(value)) {const errTxt = rule.errorMsg || 'invalid value';callback(new Error(errTxt));} else {callback();}},
};/*** @desc  [自定义校验规则]* @example*  import { validateRule } from "@/utils/validateRules";*  rules: [*     { validator: validateRule.emailValue, trigger: 'blur'}*  ]*/export const getRegExp = function (validatorName) {const commonRegExp = {number: '^[-]?\\d+(\\.\\d+)?$',letter: '^[A-Za-z]+$',letterAndNumber: '^[A-Za-z0-9]+$',mobilePhone: '^[1][3-9][0-9]{9}$',letterStartNumberIncluded: '^[A-Za-z]+[A-Za-z\\d]*$',noChinese: '^[^\u4e00-\u9fa5]+$',chinese: '^[\u4e00-\u9fa5]+$',email: '^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+\\.)+[A-Za-z0-9]{2,3}$',url: '(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]'};return commonRegExp[validatorName];
};const validateFn = (validatorName, rule, value, callback, defaultErrorMsg) => {if (validateNull(value) || value.length <= 0) {callback();return;}const reg = new RegExp(getRegExp(validatorName));if (!reg.test(value)) {const errTxt = rule.errorMsg || defaultErrorMsg;callback(new Error(errTxt));} else {callback();}
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1054528.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式学习记录5.18(多点通信)

一、套接字属性设置相关函数 #include <sys/types.h> /* See NOTES */#include <sys/socket.h>int getsockopt(int sockfd, int level, int optname,void *optval, socklen_t *optlen);int setsockopt(int sockfd, int level, int optname,const void *op…

量化交易入门:如何在QMT中配置Python环境,安装第三方依赖包

哈喽,大家好,我是木头左! 引言 QMT,作为量化交易系统中的佼佼者,以其强大的功能和灵活的操作性,受到了广大投资者的青睐。但是,对于很多新手来说,如何在QMT中配置Python环境,安装第三方依赖包,却是一个让人头疼的问题。本文将从零开始,手把手教你如何在QMT中配置Py…

股票交易vip快速通道有什么门槛?vip交易通道的开通流程!

证券公司的VIP通道通常是为了满足高端客户或高频交易客户的需求而设立的&#xff0c;提供更快速、更便捷的交易服务。证券公司VIP通道适用于有追涨停板需求的投资者&#xff0c;以及一些喜爱高频交易的投资者&#xff0c;总的来说就是快速&#xff0c;在交易主机排队靠前。 VI…

MySQL8报错Public Key Retrieval is not allowedz 怎么解决?

问题描述 当我们使用数据库管理工具连接mysql8的时候&#xff0c;可能遇到报错&#xff1a; Public Key Retrieval is not allowed 解决办法 1、在连接属性中配置allowPublicKeyRetrieval设置为true 2、在连接URL中加上配置allowPublicKeyRetrieval为true

Discourse 编辑没有办法显示更多的 JS 错误

Priority/Severity: High Platform: 3.3.0.beta3-dev UI bugs Description: 昨天升级的时到最新版本的时候就发现有这个错误&#xff0c;是 JS 的错误。 发了一个帖子到官方的网站上&#xff0c;官方说可能是插件的问题。 但是我们实在是没有安装什么插件呀&#xff1f; 官方…

uniapp一些问题解决

1.按钮边框如何去除&#xff1f; 参考博主&#xff1a;微信小程序按钮去不掉边框_微信小程序button去掉边框-CSDN博客文章浏览阅读1k次。最近在学uni-app&#xff0c;顺便自己写个小程序。左上角放了个button&#xff0c;可边框怎么也去不掉…原来微信小程序的按钮要去掉边框要…

软件游戏找不到xinput1_3.dll如何修复?分享几种有效的解决方法

当您在使用电脑过程中遇到系统提示“xinput1_3.dll文件丢失”时&#xff0c;这可能会导致某些游戏或应用程序无法正常运行&#xff0c;因为xinput1_3.dll是与DirectX相关的一个重要动态链接库文件&#xff0c;主要负责处理游戏控制器输入。为了解决这个问题&#xff0c;我通过查…

期权具体怎么交易详细的操作流程?

期权就是股票&#xff0c;唯一区别标的物上证指数&#xff0c;会看大盘吧&#xff0c;交易两个方向认购做多&#xff0c;认沽做空&#xff0c;双向t0交易&#xff0c;期权具体交易流程可以理解选择方向多和空&#xff0c;选开仓的合约&#xff0c;买入开仓和平仓没了&#xff0…

经典文献阅读之--RenderOcc(使用2D标签训练多视图3D Occupancy模型)

0. 简介 3D占据预测在机器人感知和自动驾驶领域具有重要的潜力&#xff0c;它将3D场景量化为带有语义标签的网格单元。最近的研究主要利用3D体素空间中的完整占据标签进行监督。然而&#xff0c;昂贵的注释过程和有时模糊的标签严重限制了3D占据模型的可用性和可扩展性。为了解…

YOLOv5数据集的文件结构和文件格式以及标注工具LabelImg的说明文档

文章目录 一 概述二 文件结构与数据格式2.1 数据集的文件结构2.2 数据格式2.2 文件结构2.3 标注文件的注意事项 三 手动标注YOLOv5数据集3.1 标注工具的选择3.2 标注流程 四 总结与注意事项4.1 labelImg的使用技巧与说明4.2 注意事项 一 概述 YOLOv5 是一个采用深度学习技…

【华为实验】一文带你轻松掌握综合实验!

更多实验配置&#xff0c;点击学习 PPPoE实验新手必备&#xff1a;从0到1的网络配置指南&#xff01; 网络工程师必备&#xff1a;静态路由实验指南 … 大家好&#xff0c;今天带大家学习一下华为初级课程里面的综合实验。 01 实验拓扑 02 实验需求 需求: 1.总部核心与接…

去中心化的 S3,CESS 首创去中心化对象存储 DeOSS

Web3 在各个领域的应用和发展已成为讨论的焦点&#xff0c;尽管行业对 Web3 的定义各不相同&#xff0c;但一个普遍的共识是 Web3 赋予了用户对其数据的所有权和自主权。这一转变在我们的生活和工作与数字化越来越深入地融合之际至关重要&#xff0c;这意味着所有人类活动很快将…

gem5模拟器入门(二)——创建一个简单的配置脚本

本章教程将引导您设置一个简单的 gem5 仿真脚本&#xff0c;并首次运行 gem5。假设您已经完成了gem5模拟器入门&#xff08;一&#xff09;——环境配置-CSDN博客&#xff0c;并成功构建了带有可执行文件 build/X86/gem5.opt 的 gem5。 配置脚本将模拟一个非常简单的系统&#…

DNS设置(linux)

1.配置dns需要现在/etc/sysconfig/network-scripts/目录下的ifcfg-ens33(后面数字也可能是其他的)中配置DNS 2.编辑/etc/resolv.conf文件&#xff0c;将上面网卡中加的dns服务器ip添加到此文件 vi /etc/resolv.conf重启网络配置 service network restart常用的dns的ip 国内…

Llama模型家族训练奖励模型Reward Model技术及代码实战(一)

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…

layui实现表格根据数据来勾选已保存的数据

示例图 勾选一次保存后&#xff0c;每次进到查询都会看到被勾选的数据&#xff0c;代码如下&#xff1a; done: function(res, curr, count) {var groupId "[[${groupId}]]";$.ajax({url: //写后端获取数据的接口type: GET,success: function(data) {console.log(d…

【全开源】防伪溯源一体化管理系统源码(FastAdmin+ThinkPHP和Uniapp)

一款基于FastAdminThinkPHP和Uniapp进行开发的多平台&#xff08;微信小程序、H5网页&#xff09;溯源、防伪、管理一体化独立系统&#xff0c;拥有强大的防伪码和溯源码双码生成功能&#xff08;内置多种生成规则&#xff09;、批量大量导出防伪和溯源码码数据、支持代理商管理…

JavaScript(ES6)入门

ES6 1、介绍 ECMAScript 6&#xff08;简称ES6&#xff09;是于2015年6月正式发布的JavaScript 语言的标准&#xff0c;正式名为ECMAScript 2015&#xff08;ES2015&#xff09;。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序&#xff0c;成为企业级开发语言。…

游泳时用什么耳机听歌好?精品榜前四游泳耳机揭秘,款款佳品!

游泳时用什么耳机听歌好&#xff1f;这无疑是众多水上运动爱好者的共同疑问。在享受游泳带来的清凉与畅快时&#xff0c;若能伴随着悦耳的音乐&#xff0c;无疑能让整个体验更加完美。然而&#xff0c;市面上的游泳耳机种类繁多&#xff0c;品质各异&#xff0c;如何选择一款既…

PageHelper多数据源无法自动切换数据源问题解决

在使用PageHelper进行分页处理的过程中&#xff0c;通过配置autoRuntimeDialect: true发现&#xff0c;在执行MySQL分页处理后&#xff0c;继续执行SqlServer的分页&#xff0c;使用的仍然是MySQL的语法&#xff0c;PageHelper并没有进行自动切换数据源处理。 在查看源码的时候…