uniapp的表单校验方式整理

news2024/11/14 7:36:11

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>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Jenkins 2.4 创建子节点

Jenkins 2.4 创建子节点

在 Dashboard > 系统管理 > 节点列表 页面&#xff0c;选择 New Node 按钮&#xff0c;新建节点 windows_10&#xff0c;节点类型选择 固定节点&#xff0c;点击 Create 创建&#xff1a; 将 远程工作目录 设置子节点电脑上的执行工作目录&#xff0c;例如在D盘创建一个 …
阅读更多...
Django框架-3

Django框架-3

使用admin后台管理数据 创建模型类 模型类&#xff1a;应用中的models.py文件中 from django.db import models# Create your models here. # 模型类必须要继承models.Model class doogs(models.Model):# 属性create_time models.DateTimeField(auto_now_addTrue, verbose_…
阅读更多...
新闻丨INDEMIND荣获2023年北京市朝阳区创新型中小型企业认定

新闻丨INDEMIND荣获2023年北京市朝阳区创新型中小型企业认定

近日&#xff0c;北京市朝阳区科学技术和信息化局公布了“朝阳区2023年度第五批创新型中小企业名单”&#xff0c;INDEMIND凭借专业研发和创新能力等优势&#xff0c;成功入选。 创新型中小企业名单依据工业和信息化部2022年6月发布《优质中小企业梯度培育管理暂行办法》&#…
阅读更多...
Golang每日一练(leetDay0111) 摆动排序II\I Wiggle Sort

Golang每日一练(leetDay0111) 摆动排序II\I Wiggle Sort

目录 324. 摆动排序 II Wiggle Sort ii &#x1f31f;&#x1f31f; 280. 摆动排序 I Wiggle Sort i &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Rust每日一练 专栏 Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每…
阅读更多...
威胁建模之绘制数据流图

威胁建模之绘制数据流图

0x00 前言 1、什么是威胁建模&#xff1a; 以结构化的方式思考、记录并讨论系统存在的安全威胁&#xff0c;并针对这些威胁制定相应的消减措施。 2、为什么要威胁建模&#xff1a; &#xff08;1&#xff09;在设计阶段开展威胁建模&#xff0c;一方面可以更全面的发现系统存…
阅读更多...
数据结构--静态链表

数据结构--静态链表

数据结构–静态链表 单链表 VS 静态链表 单链表:各个结点在内存中星罗棋布、散落天涯。 静态链表:分配一整片连续的内存空间&#xff0c;各个结点集中安置。 代码定义 代码一&#xff1a; #define MaxSize 10 //静态链表的最大长度 typedef struct //静态链表结构类型的定…
阅读更多...
无限容量分布式文件存储解决方案

无限容量分布式文件存储解决方案

常见分布式文件系统 常见分布式文件系统比较 常见的分布式文件系统有GFS、HDFS 、Ceph 、GridFS 、TFS、FastDFS等。各自适用于不同的领域。 类 Google FS 都支持文件冗余备份&#xff0c;例如 Google FS、TFS 的备份数是 3。一个文件存储到哪几个存储结点&#xff0c;通常采…
阅读更多...
《计算机系统与网络安全》第一章 计算机系统与网络安全概述

《计算机系统与网络安全》第一章 计算机系统与网络安全概述

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…
阅读更多...
java的注解方式和xml方式这两种方式对数据库进行操作详解

java的注解方式和xml方式这两种方式对数据库进行操作详解

首先需要引入mybatisplus包 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.1.1</version> </dependency>第一种注解方式&#xff1a;参数是通过#{}来接收的 p…
阅读更多...
腾讯云服务-云点播：删除腾讯云点播录制的视频文件（保存在腾讯云是需要收费的）

腾讯云服务-云点播：删除腾讯云点播录制的视频文件（保存在腾讯云是需要收费的）

文档地址&#xff1a;登录 - 腾讯云https://console.cloud.tencent.com/api/explorer?Productvod&Version2018-07-17&ActionDeleteMedia 使用python后端删除&#xff1a; import json from tencentcloud.common import credential from tencentcloud.common.profile…
阅读更多...
kafka入门，数据有序、数据乱序（十）

kafka入门，数据有序、数据乱序（十）

数据有序 数据乱序 max.in.flight.requests.per.connection指定了生产者在接收到服务器相应之前可以发送多个消息。 kafka在1.x版本之前保证单分区有序&#xff0c;条件如下 max.in.flight.requests.per.connection1 2) kafka在1.x及以后版本保证数据单区间分区有序&#xff0…
阅读更多...
vue 函数式(编程式) render (functional:true)

vue 函数式(编程式) render (functional:true)

文章目录 一、文档二、区别三、使用h函数的参数解释&#xff1a;参数一&#xff1a;使用导入的组件名 参数二&#xff1a;绑定css绑定事件往组件里面传递参数动态绑定值props动态绑定值datafunctional:true到底是做什么的&#xff1f;动态绑定props 非functional:true版本 参数…
阅读更多...
JSONUtil.toJsonStr 时间变成了时间戳

JSONUtil.toJsonStr 时间变成了时间戳

问题描述 我的接口是以Date来接收日期的&#xff0c;然后我在拿到这个对象参数后&#xff0c;通过hutool当中的JSONUtil.toJsonStr将其序列化成json字符串&#xff0c;然后存储到数据库。然后存储到数据库当中发现这个字段是时间戳。 DateTimeFormat和JsonFormat 前者是控制 请…
阅读更多...
动态规划详解Python

动态规划详解Python

动态规划 动态规划&#xff08;Dynamic Programming&#xff09;是一种用于解决复杂问题的算法设计方法。它通常用于优化问题&#xff0c;其中问题可以被分解成一系列重叠子问题&#xff0c;通过存储并重复使用已经解决过的子问题的解&#xff0c;可以避免重复计算&#xff0c…
阅读更多...
区块链的简单认识

区块链的简单认识

比特币作为区块链的应用&#xff0c;让区块链广为人知&#xff0c;如果比特币作为第一代区块链&#xff0c;则以太坊则称为第二代区块链。我们知道&#xff0c;区块链的最主要目的就是去中心化&#xff0c;比特币则成为了decentralized currency&#xff0c;去中心化在技术上依…
阅读更多...
跨注册中心服务同步实践

跨注册中心服务同步实践

博主介绍&#xff1a;✌全网粉丝4W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战、定制、远程&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面…
阅读更多...
助你丝滑过度到 Vue3 创建工程 ②③

助你丝滑过度到 Vue3 创建工程 ②③

作者 : SYFStrive 博客首页 : HomePage &#x1f4dc;&#xff1a; VUE3~TS &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;觉得文章不错可以点点关注 &#x1f449;…
阅读更多...
同城跑腿独立版小程序 码科跑腿小程序 支持用户端 骑手端

同城跑腿独立版小程序 码科跑腿小程序 支持用户端 骑手端

是独立版哦&#xff0c;不是微擎的 搭建有点复杂&#xff0c;只要一步错就会导致骑手端来单没有声音提示. 多的也不介绍了&#xff0c;不知道的朋友可以百度一下码科跑腿就知道了&#xff01;
阅读更多...
机器学习李宏毅学习笔记33

机器学习李宏毅学习笔记33

文章目录 前言一、神经网络压缩二、Network pruning----一种network compression技术1.移除不同单位的区别2.大乐透假说 总结 前言 神经网络压缩&#xff08;一&#xff09; 类神经网络剪枝&#xff08;pruning&#xff09; 一、神经网络压缩 简化模型&#xff0c;用比较少的…
阅读更多...
netty_客户端和服务端，定长数据输出案例

netty_客户端和服务端，定长数据输出案例

步骤1&#xff1a;创建server import io.netty.bootstrap.ServerBootstrap; import io.netty.channel.ChannelFuture; import io.netty.channel.ChannelInitializer; import io.netty.channel.ChannelOption; import io.netty.channel.EventLoopGroup; import io.netty.channe…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023