uniapp的表单校验方式整理

uniapp的表单校验方式整理

这里我使用的模板为：
在这里插入图片描述

第一种：

uniapp本身自带表单校验的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]) {
						this.error = rule[i].errorMsg;
						return false;
					}
				break;
				case 'betweenD':
					var reg = /^-?[1-9][0-9]?$/;
					if (!reg.test(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]) {
						this.error = rule[i].errorMsg;
						return false;
					}
				break;
				case 'betweenF': 
					var reg = /^-?[0-9][0-9]?.+[0-9]+$/;
					if (!reg.test(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]) {
						this.error = rule[i].errorMsg;
						return false;
					}
				break;
				case 'same':
					if (data[rule[i].name] != rule[i].checkRule) { this.error = rule[i].errorMsg; return false;}
				break;
				case 'notsame':
					if (data[rule[i].name] == rule[i].checkRule) { this.error = rule[i].errorMsg; return false; }
				break;
				case 'email':
					var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
				break;
				case 'phoneno':
					var reg = /^1[0-9]{10,10}$/;
					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
				break;
				case 'zipcode':
					var reg = /^[0-9]{6}$/;
					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
				break;
				case 'reg':
					var reg = new RegExp(rule[i].checkRule);
					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
				break;
				case 'in':
					if(rule[i].checkRule.indexOf(data[rule[i].name]) == -1){
						this.error = rule[i].errorMsg; return false;
					}
				break;
				case 'notnull':
					if(data[rule[i].name] == null || data[rule[i].name].length < 1){this.error = rule[i].errorMsg; return false;}
				break;
			}
		}
		return true;
	},
	isNumber : function (checkVal){
		var reg = /^-?[1-9][0-9]?.?[0-9]*$/;
		return reg.test(checkVal);
	}
}

应用代码：

<template>
	<view>
		<page-head title="form"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item uni-column">
					<view class="title">姓名</view>
					<input class="uni-input" name="nickname" placeholder="请输入姓名" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">性别</view>
					<radio-group name="gender">
						<label>
							<radio value="男" /><text>男</text>
						</label>
						<label>
							<radio value="女" /><text>女</text>
						</label>
					</radio-group>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">爱好</view>
					<checkbox-group name="loves">
						<label>
							<checkbox value="读书" /><text>读书</text>
						</label>
						<label>
							<checkbox value="写字" /><text>写字</text>
						</label>
					</checkbox-group>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">年龄</view>
					<slider value="20" name="age" show-value></slider>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">保留选项</view>
					<view>
						<switch name="switch" />
					</view>
				</view>
				<view class="uni-btn-v">
					<button form-type="submit">Submit</button>
					<button type="default" form-type="reset">Reset</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	import graceChecker from "../../../common/graceChecker.js"
	export default {
		data() {
			return {
			}
		},
		methods: {
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
                //定义表单规则
                var rule = [
                    {name:"nickname", checkType : "string", checkRule:"1,3",  errorMsg:"姓名应为1-3个字符"},
                    {name:"gender", checkType : "in", checkRule:"男,女",  errorMsg:"请选择性别"},
                    {name:"loves", checkType : "notnull", checkRule:"",  errorMsg:"请选择爱好"}
                ];
                //进行表单检查
                var formData = e.detail.value;
                var checkRes = graceChecker.check(formData, rule);
                if(checkRes){
                    uni.showToast({title:"验证通过!", icon:"none"});
                }else{
                    uni.showToast({ title: graceChecker.error, icon: "none" });
                }
			},
			formReset: function(e) {
				console.log('清空数据')
			}
		}
	}
</script>

<style>
	.uni-form-item .title {
		padding: 20rpx 0;
	}
</style>

第二种：

uni-forms也带表单的校验，相较于第一种的话，校验的种类就不是很全了，可以自己传入校验规则进行校验，提示样式更加鲜明，只能说各利弊了。

表单校验的核心代码：

在这里插入图片描述
代码比较多这里就不粘贴了。
没有找到手机号对应的校验方式，自己用的又比较多，所以手动在代码里面添加了
在这里插入图片描述
在这里插入图片描述
非常的便捷

也可以在使用的时候添加自己的校验方式：

在这里插入图片描述

最后附上完成的页面使用（只保留了核心代码，样式需要自行修改）：

<template>
		<view class = "content">
			<view class = "content-in">
				<uni-forms ref="valiForm" :rules="rules" :model="valiFormData" >
					<view class = "login-t">
						<text class = "login-text">重置密码</text>
					</view>
					<view class = "login-i" >
						<uni-forms-item required name="phone" class = "imgList">
							 <uni-easyinput  style ="width:500rpx;" v-model="valiFormData.phone" focus placeholder="请输入您的手机号"/>
						</uni-forms-item>
					</view>
					
					<view class = "login-p" >
						<uni-forms-item  required name="password" class = "imgList">
							<uni-easyinput  v-model="valiFormData.password" type = 'password' placeholder="请输入您的密码" />
						</uni-forms-item>
						 
					</view>
					
					<view class = "login-p"  >
						<uni-forms-item  required name="repassword" class = "imgList">
							<uni-easyinput  v-model="valiFormData.repassword"  type = 'password' placeholder="请再次输入您的密码" />
						</uni-forms-item>
						
					</view>
					
					<view class = "login-i">
						<uni-forms-item required name="code" class = "imgList">
							<uni-easyinput  v-model="valiFormData.code" focus placeholder="请输入短信验证码" />
						</uni-forms-item>
						<!-- <text class="try" style="font-size:10rpx;" >获取验证码</text> -->
						<view class="try" style="font-size:24rpx;" @click.stop="getCode()">{{getCodeText}}</view>
					</view>
					<view class = "login-b">
						<button class= "btn" @click="submit('valiForm')">重置密码</button>
					</view>
				</uni-forms>
				
			</view>
		</view>
		
</template>

<script>
	export default {
	    data() {
	        return {
				getCodeText: '获取验证码',
				valiFormData: {
					phone: '',
					passward: '',
					repassward: '',
					code: '',
				},

				// 校验规则
				rules: {
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					},
					
					repassword: {
						rules: [{
							required: true,
							errorMessage: '请再次输入密码'
						}, {
								validateFunction: function(rule, value, data, callback) {
									if (value != data.password) {
										callback('两次密码不一致')
									}
									return true
								}
							}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '验证码不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}, 
						{
							format: 'phone',
							errorMessage: '请填写正确手机号'
						}]
					},
				},
				 
				
	            
	        }
	    },
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.valiForm.setRules(this.rules)
		},

	    methods: {

	        //表单
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err[0].errorMessage
					});
				})
			},
			
			
	    },
	    
	}
</script>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

PyQt中数据库的访问（一）

PyQt中数据库的访问（一）

访问数据库的第一步是确保ODBC数据源配置成功&#xff0c;我接下来会写数据源配置的文章&#xff0c;请继续关注本栏&#xff01; &#xff08;一&#xff09;数据库连接 self.DBQSqlDatabase.addDatabase("QODBC") self.DB.setDatabaseName("Driver{sqlServer…
阅读更多...
ModaHub AI模型开源社区——向量数据库Milvus存储操作教程

ModaHub AI模型开源社区——向量数据库Milvus存储操作教程

目录 存储操作 数据插入 数据落盘 定时触发 客户端触发 缓冲区达到上限触发 数据合并 建立索引 删除 删除集合 删除分区 删除实体 数据段整理 数据读取 常见问题 存储操作 阅读本文前&#xff0c;请先阅读 存储相关概念。 数据插入 客户端通过调用 insert 接…
阅读更多...
【计算机视觉】DINO

【计算机视觉】DINO

paper&#xff1a;Emerging Properties in Self-Supervised Vision Transformers 源码&#xff1a;https://github.com/facebookresearch/dino 20230627周二目前只把第一部分看完了。 论文导读&#xff1a;DINO -自监督视觉Transformers - deephub的文章 - 知乎 综述类型&a…
阅读更多...
线程不安全举例

线程不安全举例

1、举例说明集合类线程不安全 &#xff08;1&#xff09;查看源码可证明 看ArrayList源码 没有sync、lock&#xff0c;线程不安全 &#xff08;2&#xff09;创建多个线程写入读取数据 List<String> list new ArrayList<>(); for (int i 1; i <30 ; i) {n…
阅读更多...
【Android】Android虚拟机

【Android】Android虚拟机

虚拟机 Android的虚拟机主要有两种&#xff1a;Dalvik 虚拟机和 ART&#xff08;Android Runtime&#xff09;虚拟机。 Dalvik 虚拟机 Dalvik 虚拟机是 Android 早期使用的虚拟机&#xff0c;它基于寄存器架构。从Android 2.2版本开始&#xff0c;支持JIT即时编译&#xff08…
阅读更多...
基于多站点集中汇聚需求的远程调用直播视频汇聚平台解决方案

基于多站点集中汇聚需求的远程调用直播视频汇聚平台解决方案

一、行业背景 随着视频汇聚需求的不断提升&#xff0c;智慧校园、智慧园区等项目中需要将各分支机构的视频统一汇聚到总部&#xff0c;进行统一管控&#xff0c;要满足在监控内部局域网、互联网、VPN网络等TCP/IP环境下&#xff0c;为用户提供低成本、高扩展、强兼容、高性能的…
阅读更多...
【SpringBoot】基于SSM框架的题库系统的设计与实现

【SpringBoot】基于SSM框架的题库系统的设计与实现

文章结构 课题&#xff1a;一、项目简介主要功能技术选型 二、 模块介绍学生端教师端(一)考试管理(二)试题管理(三)学生成绩管理 管理员三、 B站项目演示地址 四、本项目其余相关博客 课题&#xff1a; 题库系统的设计与实现一、项目简介 简介&#xff1a;主要分为三个端&…
阅读更多...
DAY38——动态规划

DAY38——动态规划

步骤&#xff1a; 确定dp数组&#xff08;dp table&#xff09;以及下标的含义确定递推公式dp数组如何初始化确定遍历顺序举例推导dp数组 题目一. 斐波那契数列 1. 确定dp数组以及下标的含义 dp[i]的定义为&#xff1a;第i个数的斐波那契数值是dp[i] 2. 确定递推公式 状态…
阅读更多...
【Zookeeper】win安装随笔

【Zookeeper】win安装随笔

目录 下载地址下载目标解压后目录结构配置文件配置文件详情伪分布式安装LinuxZooKeeper audit is disabled启动解决报错&#xff1a;SLF4J: Class path contains multiple SLF4J bindings. _ 下载地址 https://zookeeper.apache.org/releases.html 下载目标 记住选择带bin的…
阅读更多...
一步一步学OAK之四:实现如何在低延迟下使用高分辨率视频

一步一步学OAK之四:实现如何在低延迟下使用高分辨率视频

目录 Setup 1: 创建文件Setup 2: 安装依赖Setup 3: 导入需要的包Setup 4: 创建pipelineSetup 5: 创建节点Setup 6: 设置节点的属性和参数。Setup 7: 建立链接关系Setup 8: 连接设备并启动管道Setup 9: 创建与DepthAI设备通信的输入队列和输出队列Setup 10: 主循环获取视频帧显示…
阅读更多...
【C++】定制删除器和特殊类设计（饿汉和懒汉~）

【C++】定制删除器和特殊类设计（饿汉和懒汉~）

文章目录 定制删除器一、设计一个只能在堆上(或栈上)创建的类二、单例模式 1.饿汉模式2.懒汉模式总结 定制删除器 我们在上一篇文章中讲到了智能指针&#xff0c;相信大家都会有一个问题&#xff0c;智能指针该如何辨别我们的资源是用new int开辟的还是new int[]开辟的呢&…
阅读更多...
html5前端学习2

html5前端学习2

一篇思维题题解&#xff1a; 第五周任务 [Cloned] - Virtual Judge (vjudge.net) http://t.csdn.cn/SIHdM 快捷键&#xff1a; CtrlAltDown 向下选取 CtrlAltUp 向上选取&#xff08;会出现多个光标&#xff0c;可以同时输入&#xff09; CtrlEnter …
阅读更多...
【Java】Java核心 78：Git 教程（1）Git 概述

【Java】Java核心 78：Git 教程（1）Git 概述

文章目录 01.GIT概述目标内容小结 02.GIT相关概念目标内容小结 01.GIT概述 Git是一个分布式版本控制系统&#xff0c;常用于协同开发和版本管理的工具。它可以跟踪文件的修改、记录历史版本&#xff0c;并支持多人协同工作。通过Git&#xff0c;你可以轻松地创建和切换分支、合…
阅读更多...
去除小程序home按钮

去除小程序home按钮

前言&#xff1a;当我们未登录时&#xff0c;会跳转到登录页&#xff0c;但是这时候登录页左上角会有一个跳转到首页的按钮&#xff0c;但是&#xff0c;我们不希望出现这个回到首页的按钮 去除前&#xff1a; 去除后&#xff1a; 代码&#xff1a; onShow() {wx.hideHomeBut…
阅读更多...
从零搭建一台基于ROS的自动驾驶车-----2.运动控制

从零搭建一台基于ROS的自动驾驶车-----2.运动控制

系列文章目录 北科天绘 16线3维激光雷达开发教程 基于Rplidar二维雷达使用Hector_SLAM算法在ROS中建图 Nvidia Jetson Nano学习笔记–串口通信 Nvidia Jetson Nano学习笔记–使用C语言实现GPIO 输入输出 Autolabor ROS机器人教程 从零搭建一台基于ROS的自动驾驶车-----1.整体介…
阅读更多...
VS2022 And QtCreator10 调试 Qt 源码教程

VS2022 And QtCreator10 调试 Qt 源码教程

文章目录 背景IDE 调试 Qt 源码Visual Studio 2022Qt Creator 10.0.1 排查思路姊妹篇系列 简 述&#xff1a; 记录使用 Visual Studo 2022 和 QtCreator10 调试 Qt 5.15 源码和 加载 .pdb 的方法。 本文初发于 “偕臧的小站”&#xff0c;同步转载于此。 背景 源码&#xff1a;…
阅读更多...
AR项目问题汇总

AR项目问题汇总

1、unity使用URP 导致ARFoundation黑屏 (16条消息) unity使用URP 导致ARFoundation黑屏_arfoundation运行iphone黑屏_weixin_46813963的博客-CSDN博客https://blog.csdn.net/weixin_46813963/article/details/117509322Configuring the AR Camera background using a Scriptab…
阅读更多...
当RPA遇到ChatGPT, 有哪些好玩的玩法

当RPA遇到ChatGPT, 有哪些好玩的玩法

实在RPA于2023年4月7日发布了 6.7.0 SP3&#xff0c;其中最引人注目的亮点是与ChatGPT的紧密集成 。这种集成为用户提供了全新的玩法和体验&#xff0c;使他们能够与智能模型进行即时对话和交互&#xff0c;从而提高工作效率和创造力。用户可以将ChatGPT作为虚拟助手&#xff0…
阅读更多...
java设计模式（二十三）访问者模式

java设计模式（二十三）访问者模式

目录 定义模式结构角色职责代码实现适用场景优缺点定义 访问者模式是一种行为型模式，它允许你定义一个作用于某个对象结构中的各个元素的操作，而同时又不改变这些元素的类。该模式的核心思想是将数据结构与数据操作分离，从而可以在不改变数据结构的前提下定义新的操作。 模…
阅读更多...
《计算机系统与网络安全》 第十章 防火墙技术

《计算机系统与网络安全》 第十章 防火墙技术

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…
阅读更多...
最新文章

Copyright @ 2022~2023