uniapp、vue、小程序常用的一些验证规则校验方法(例如:手机号。身份证、金额等)

这篇具有很好参考价值的文章主要介绍了uniapp、vue、小程序常用的一些验证规则校验方法(例如:手机号。身份证、金额等)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

例如: 检查是否为空数组 、是否是空  不为空false 为空true、校验密码、校验手机号格式、校验邮箱格式、校验身份证号格式、校验值长度 不少于6位数、 电话号码加密   15288889999 转化为 152****9999、身份证号码加密、验证输入重量、金额等类型   例如 0.11  2.23  100.123等等 、验证输入的钱    单纯验证金额类型 、验证是否是纯数值 、处理数据 :可把制定相同的key值得对象存储到下级得children中、生成唯一ID、数字转中文  运行结果 : 1 转为 一、图片转为base64、获取随机字符串、授权微信小程序消息推送。

新建utils.js文件

/**
 * 通用的数据处理和验证类 
 
	1、在main.js中配置下列代码
	import Utils from '@/utils/utils.js';
	Vue.prototype.$Utils = Utils;
	
	2、使用方式
	
	let str = "0";
	if(this.$Utils.isNull(str)){
		console.log("str 是空")
	}

 */
export default class Utils {
	/**
	 * 检查是否为空数组 空数组返回 true
	 * @param {Array} arr 数组
	 * @return Boolean
	 */
	static isEmptyArr(arr) {
		if (!Array.isArray(arr)) throw new Error('isEmptyArr 参数不是一个数组');
		if (!arr.length) return true;
		return false;
	}

	/**
	 * 是否是空  不为空false 为空true
	 * @param {any} opt 验证参数
	 * @return Boolean
	 */
	static isNull(opt) {
		if (opt == '' || opt == null || opt == 'null' || opt == undefined) return true;
		return false;
	}

	/**
	 * 校验密码
	 * @param phone
	 * @returns {boolean}
	 */
	static checkPassword(phone) {
		let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/;
		return reg.test(phone);
	}

	/**
	 * 校验手机号格式
	 * @param phone
	 * @returns {boolean}
	 */
	static checkPhone(phone) {
		let reg = /^1[3456789]\d{9}$/;
		return reg.test(phone);
	}

	/**
	 * 校验邮箱格式
	 * @param email
	 * @returns {boolean}
	 */
	static checkEmail(email) {
		let reg = /^\w+@[a-z0-9]+\.[a-z]{2,4}$/;
		return reg.test(email);
	}

	/**
	 * 校验身份证号格式
	 * @param email
	 * @returns {boolean}
	 */
	static checkCardNo(email) {
		let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
		return reg.test(email);
	}

	/**
	 * 校验值长度 不少于6位数
	 * @param email
	 * @returns {boolean}
	 */
	static checkValueLength(password, min = 6, max = 0) {
		let regExp = new RegExp(`^[\\s\\S]{${min || ''},${max || ''}}$`);
		return regExp.test(password);
	}

	/**
	 * 电话号码加密   15288889999 转化为 152****9999
	 */
	static phoneEncryption(phone = "") {
		return phone.replace(/^(\d{3})\d{4}(\d+)/, '$1****$2')
	}

	/**
	 * 身份证号码加密
	 */
	static idCardEncryption(idCard) {
		if (!idCard) return ""
		let reg = /^(.{6})(?:\d+)(.{4})$/
		let result = idCard.replace(reg, '\$1******\$2') // 身份证号脱敏,将中间8位替换为“*”
		return result
	}

	/**验证输入重量、金额等类型   例如 0.11  2.23  100.123等等   
	 * @param {Object} value
	 */
	static checkMoney(value, len = 6) {
		let reg = /\d{1,}\.{0,1}\d{0,2}/;
		if (value.replace(reg, '')) {
			value = (value.match(reg) == null ? '' : value.match(reg));
		}
		if ((value >= 1) && (`${value}`.indexOf(0) == 0)) {
			value = parseFloat(value);
		}
		if (`${value}`.indexOf('00') == 0) {
			value = 0;
		}
		let str = parseInt(value).toString();
		if (str.length >= len && (value.toString().indexOf('.') < 0)) {
			value = parseFloat(str.slice(0, len));
		}
		return value;
	}

	/**验证输入的钱    单纯验证金额类型 
	 * @param {Object} value
	 */
	static isMoney(value) {
		var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
		if (reg.test(value)) {
			return true;
		} else {
			return false;
		};
	}

	// 验证是否是纯数值   
	static isNumber(value) {
		var reg = /^[0-9]*[1-9][0-9]*$/;
		if (reg.test(value)) {
			return true;
		} else {
			return false;
		};
	}

	/**
	 * 处理数据 :可把制定相同的key值得对象存储到下级得children中
	 */
	static mergeData(list = [], key, name = 'children') {
		const data = [];
		list.forEach((item, index) => {
			const parent = data.find((i) => i[key] === item[key]);
			if (parent) {
				parent[name].push({
					...item
				});
			} else {
				let obj = {
					...item
				};
				if (!obj[name]) {
					obj[name] = [];
				}
				obj[name].push({
					...item
				});
				data.push(obj);
			}
		});
		return data;
	}

	// 表单验证   
	static validateForm(key, rules) {
		var check = true
		rules[key].forEach((v) => {
			// 验证失败
			if (!(v.rule).test(this[key])) {
				uni.showToast({
					title: v.msg,
					icon: 'none'
				});
				check = false
				return false
			}
		})
		return check
	};

	// uniapp 获取到上一页的信息,    适用:添加、编辑数据的时候,刷新上一页列表的数据  
	static beforePage(num = 1) {
		// 当前页的数据,
		let pages = getCurrentPages();
		// 上一页的数据
		let prevPage = pages[pages.length - (num + 1)];
		return prevPage.$vm;
	};

	//生成唯一ID  :  根据当前系统时间随机生成一个长字符串
	static getID() {
		const now = new Date()
		const year = now.getFullYear();
		let month = now.getMonth() + 1;
		let day = now.getDate();
		let hour = now.getHours();
		let minutes = now.getMinutes();
		let seconds = now.getSeconds();

		month = month < 10 ? '0' + month : month;
		day = day < 10 ? '0' + day : day;
		hour = hour < 10 ? '0' + hour : hour;
		minutes = minutes < 10 ? '0' + minutes : minutes;
		seconds = seconds < 10 ? '0' + seconds : seconds;

		const yyyyMMddHHmmss = `${year}${month}${day}${hour}${minutes}${seconds}`;
		const rand = Math.random().toString(10).substr(2, 10);

		return `${yyyyMMddHHmmss}${rand}`;
	};

	//数字转中文  运行结果 : 1 转为 一
	static toChinesNum(num) {
		let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
		let unit = ['', '十', '百', '千', '万']
		num = parseInt(num)
		let getWan = (temp) => {
			let strArr = temp.toString().split('').reverse()
			let newNum = ''
			let newArr = []
			strArr.forEach((item, index) => {
				newArr.unshift(item === '0' ? changeNum[item] : changeNum[item] + unit[index])
			})
			let numArr = []
			newArr.forEach((m, n) => {
				if (m !== '零') numArr.push(n)
			})
			if (newArr.length > 1) {
				newArr.forEach((m, n) => {
					if (newArr[newArr.length - 1] === '零') {
						if (n <= numArr[numArr.length - 1]) {
							newNum += m
						}
					} else {
						newNum += m
					}
				})
			} else {
				newNum = newArr[0]
			}
			return newNum
		}
		let overWan = Math.floor(num / 10000)
		let noWan = num % 10000
		if (noWan.toString().length < 4) {
			noWan = '0' + noWan
		}
		return overWan ? getWan(overWan) + '万' + getWan(noWan) : getWan(num)
	};
	// 图片转为base64
	static getBase64Image = (url, callback) => {
		// #ifdef MP-WEIXIN
		uni.getFileSystemManager().readFile({
			filePath: url, //选择图片返回的相对路径
			encoding: 'base64', //编码格式
			success: res => { //成功的回调
				console.log(res, '返回结果');
				let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符,在页面无法显示的哦
				callback && callback(base64)
			},
			fail: (e) => {
				console.log("图片转换失败");
			}
		})
		// #endif
		// #ifdef H5
		uni.request({
			url: url,
			method: 'GET',
			responseType: 'arraybuffer',
			success: res => {
				let base64 = uni.arrayBufferToBase64(res.data); //把arraybuffer转成base64
				base64 = 'data:image/jpeg;base64,' + base64;
				callback && callback(base64)
			},
			fail: (e) => {
				console.log("图片转换失败");
			}
		})
		// #endif
		// #ifdef APP-PLUS
		plus.io.resolveLocalFileSystemURL(url, (entry) => {
			entry.file((file) => {
				let fileReader = new plus.io.FileReader();
				fileReader.onloadend = (e) => {
					callback && callback(e.target.result)
				};
				fileReader.readAsDataURL(file);
			})
		})
		// #endif
	};
	// 获取随机字符串
	static generateRandomString(length = 32) {
		const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
		let result = '';
		for (let i = 0; i < length; i++) {
			result += characters.charAt(Math.floor(Math.random() * characters.length));
		}
		return result;
	};
	// 授权微信小程序消息推送
	static authAppletInfoPush(tmplIdsArr = [], callback) {
		uni.requestSubscribeMessage({
			provider: 'weixin',
			tmplIds: tmplIdsArr,
			success: function(res) {
				console.log('success', res)
			},
			fail: function() {
				console.log('fail', res)
			},
			complete: function(res) {
				console.log('complete', res)
				if (callback) callback(res)
			}
		})
	}
}

直接使用方法:文章来源地址https://www.toymoban.com/news/detail-782808.html


	1、在main.js中配置下列代码
	import Utils from '@/utils/utils.js';
	Vue.prototype.$Utils = Utils;
	
	2、使用方式
	
	let str = "0";
	if(this.$Utils.isNull(str)){
		console.log("str 是空")
	}

到了这里,关于uniapp、vue、小程序常用的一些验证规则校验方法(例如:手机号。身份证、金额等)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 一些常用的公共方法

    封装代码及调用参考这篇文章:  uniapp 封装公共方法(无需每个页面引用,直接调用)_前端小胡兔的博客-CSDN博客 uniapp 封装公共方法 https://blog.csdn.net/weixin_44805839/article/details/131684296?spm=1001.2014.3001.5501 常用方法:  自定义返回页面 (直接使用uni.navigateBack可能会报错: 当页面层级为

    2024年02月16日
    浏览(56)
  • uniapp表单uni-forms校验自定义校验规则,手机校验、身份证校验

    validateFunction 自定义校验规则 如果需要使用 validateFunction 自定义校验规则,则 不能采用 uni-forms 的 rules 属性来配置校验规则,这时候需要通过ref,在 onReady 生命周期调用组件的setRules方法绑定验证规则 无法通过props传递变量,是因为微信小程序会过滤掉对象中的方法,导致自定

    2024年02月11日
    浏览(92)
  • Web 前端常用正则校验规则

    作为 Web 前端开发,常用的正则校验规则有很多。下面是一些常见的示例: 手机号码的正则表达式可以根据不同国家和地区的手机号码格式进行调整。以下是中国大陆的手机号码正则表达式: 在这个示例中,正则表达式 ^1[3456789]d{9}$ 表示: ^ 表示匹配字符串的开头。 1 表示

    2024年02月06日
    浏览(38)
  • ThinkPHP 验证码扩展库的使用,以及多应用模式下,如何自定义验证码校验规则

    首先,验证码扩展库是需要view扩展的 安装完成后,接着安装验证码扩展库 视图使用的说明: 页面使用的话,两种方式 侧重说明一下,使用第二种方式 我们只需要在控制器中提供一个方法,用于验证码的生成,然后前端将img的src属性修改为对应的方法路径即可 属性说明:

    2024年02月10日
    浏览(43)
  • elementUI中的el-form常用校验规则

    elementUI中的el-form常用校验规则: 校验使用方式: 常用的校验规则:

    2024年02月07日
    浏览(41)
  • Vue rules校验规则详解

    当我们在开发Vue应用时,经常需要对表单进行校验,以确保用户输入的数据符合预期。Vue提供了一个强大的校验规则机制,通过定义rules规则,可以方便地对表单进行验证,并给出相应的错误提示。 在Vue的rules中,我们可以使用预定义的校验规则,如 required 、 type 、 min 、

    2024年02月04日
    浏览(42)
  • Vue Element-ui表单校验规则

      Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的。   我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则。但我在深入使用表单校验规则时,遇到下列问题: 如何判断属性值是否在某个范围内,且

    2024年02月03日
    浏览(81)
  • Vue: el-form 自定义校验规则

    Vue 的 el-form 组件可以使用自定义校验规则进行表单验证。自定义校验规则可以通过传递一个函数来实现,该函数接受要校验的字段的值作为参数,并返回一个布尔值或一个 Promise 对象。 下面是一个示例,演示如何在 el-form 中使用自定义校验规则: 在上述例子中,我们定义了

    2024年02月12日
    浏览(45)
  • 常用的表单校验规则——邮箱/QQ/身份证号码/微信/电话/数字字母/整数/文本/密码等

    1.邮箱校验规则 2.邮箱校验规则  3.QQ校验规则 4.身份证号码校验规则   5.微信校验规则 6.电话校验规则  7.银行卡号校验规则  8.数字字母校验规则  9.整数校验规则  10.数字校验规则  11.文本校验规则  12.密码校验规则  最后附上 rules 中的使用方法             

    2024年02月05日
    浏览(57)
  • Ant vue中表单验证(动态校验、部分校验)

    前提 :写了超级复杂的表单,其中涉及了很多表单验证的地方,现一一记录一下; ant-vue 版本1.7.8 vue 版本2.6.11 校验的原理大体相似,灵活应用!! 需求: 1根据 读写方式 去动态自动校验规则; 2.只是监听挂载路径,但因嵌套太多,表单监听的表单域不满足自动监听的条件

    2024年02月05日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包