uniapp表单验证方法封装

最新推荐文章于 2025-05-15 21:38:28 发布

如果会御剑

最新推荐文章于 2025-05-15 21:38:28 发布

阅读量2.4k

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44694389/article/details/121851568

本文记录了在uniapp中进行表单验证方法的封装过程，旨在学习和提升代码规范。通过在项目根目录创建common文件夹并建立js文件，然后在需要的vue文件中引入graceChecker.js。作者感叹官方代码的简洁，并希望自己的代码水平能有所提高。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次代码完全是uniapp官方源码，写在这里是记录笔记，如果想看源码，可以打开uniapp软件新建项目，选择uniapp官方项目案例即可。

本次目的是学习代码规范，因为觉得自己写的代码太臃肿，后期维护太难。

1.在根目录新建文件common,在文件里面新建一个js文件，名称随意。

//graceChecker.js
/**
数据验证（表单验证）
来自 grace.hcoder.net 
作者 hcoder 深海
*/
export default {
	error:'',
	check : function (data, rule){
		for(var i = 0; i < rule.length; i++){
			if (!rule[i].checkType){return true;}
			if (!rule[i].name) {return true;}
			if (!rule[i].errorMsg) {return true;}
			if (!data[rule[i].name]) {this.error = rule[i].errorMsg; return false;}
			switch (rule[i].checkType){
				case 'string':
					var reg = new RegExp('^.{' + rule[i].checkRule + '}$');
					if(!reg.test(data[rule[i].name])) {this.error = rule[i].errorMsg; return false;}
				break;
				case 'int':
					var reg = new RegExp('^(-[1-9]|[1-9])[0-9]{' + rule[i].checkRule + '}$');
					if(!reg.test(data[rule[i].name])) {this.error = rule[i].errorMsg; return false;}
					break;
				break;
				case 'between':
					if (!this.isNumber(data[rule[i].name])){
						this.error = rule[i].errorMsg;
						return false;
					}
					var minMax = rule[i].checkRule.split(',');
					minMax[0] = Number(minMax[0]);
					minMax[1] = Number(minMax[1]);
					if (data[rule[i].name] > minMax[1] || data[rule[i].name] < minMax[0]) {