uniapp的表单校验方式整理

已于 2023-10-27 15:08:22 修改
阅读量2.4k 收藏 5
点赞数
分类专栏： uniapp 文章标签： uni-app
于 2023-06-28 16:58:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/low666/article/details/131439941
版权

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>
builder2991
关注
专栏目录
Vue3电影中后台开发纪实（九）：项目简历与面试
欧阳桫的技术博客
12-17 1739
刀锋电影管理端是刀锋电影App与刀锋电影小程序的中后台管理端程序；包含用户管理、数据看板、在映影片管理、预告管理、城市管理、影院管理、订单管理、运营管理、售后客服等模块；运营人员通过该系统可以创建与维护系统用户、管理用户权限、发布影片与影院信息、创建运营活动、跟踪用户订单、提供售后服务等；
实现APP支付QQ，微信，支付宝三方的后端服务------php实现QQAPP支付
技术成长之路
02-12 4241
接上两篇支付宝支付和微信支付，下面我这边讲的是QQ支付： 下面简单介绍下QQApp支付后端的实现（这边是用php实现的）： 一、 一些琐碎的申请和设置的方式就不说明了，这些微信上都有说，但相比于支付宝吗，微信和QQ的文档相比差之千里，太简单太low了，并且没有SDKDEMO,但小伙伴们不用担心，下面是我这边封装好的一个类，可供直接使用，都有标注说明 一、封装好的QQ调用类库：（这...
uniapp 表单校验
qq_36454089的博客
07-08 3732
DCloud 插件市场 有表单校验插件 , 也可以自己封装一个 需要 在 vue 页面 定义一个表单校验规则rules 格式 : // 表单校验规则 rules: { // name 字段 userName: { //正则 校验 rule: /\S/, // 不为空 提示 name值 name: '用户名', // 正则匹配成功 提示值 msg: '用户名不为空' } } vald..
uni-app 表单验证
qq_32914215的博客
01-21 5519
uni 表单验证 本文只用做记录及学习使用 <uni-forms modelValue="formData" ref="setPwdForm" :rules="rules"> <uni-forms-item label="手机号:"> <uni-easyinput type="number" v-model="formData.phone" maxlength="11" placeholder="请输入11位电话号码" /> </uni-forms-item
uni-app内置组件(基本内容，表单组件)（）二
最新发布
chengcheng9876的博客
08-09 1257
uni-app内置组件(基本内容，表单组件)（）二
uniapp之表单校验
一步一个脚印，踏实努力，向着目标前进
07-15 6954
在插件中，你可以使用属性来定义自定义的校验规则。rulevalue和callback。rule是当前校验规则的对象，包含了校验的条件和错误提示信息。value是要校验的字段的值。callback是一个回调函数，用于通知校验结果。如果校验通过，可以调用callback()；如果校验不通过，可以调用callback(new Error('错误信息'))。if(value!callback(new Error('自定义字段必须为 "custom"'));
uniapp form表单校验
Hanx_的博客
07-18 908
光一个表单校验，就整了半天，以前用的都是element-ui的，现成的组件，这有换成uni-form的，记录一下怎么用的，还用到了uni-data-picker选择器（不过只能两级，得搞个方法封装一下能多级。公司的一个老项目，又要重新上架，uniapp一套代码，打包生成iOS端发布到App Store，安卓端发布到腾讯应用宝、OPPO、小米、华为、vivo，安卓各大应用市场上架要求不一样，可真麻烦啊。包括：必填校验，手机号校验，身份证号校验，邮箱校验。name要对应model里的值，要统一。
uni-app 表单校验
weixin_35756690的博客
12-20 1174
uni-app 是一个使用 Vue.js 开发跨平台应用的框架。表单校验是指在提交表单之前对表单中的数据进行检验的过程。 在 uni-app 中，可以使用 Vue.js 的表单验证插件或自定义表单校验逻辑来实现表单校验。 举个例子，如果你想要在 uni-app 中实现一个表单，其中包含一个电子邮件地址的输入框，并且希望在用户提交表单之前检查输入的电子邮件地址是否合法，你可以这样做： 在表单模板中...
Node.js实现大文件断点续传
老司机的后备箱
10-24 458
平常业务需求：上传图片、Excel等，毕竟几M的大小可以很快就上传到服务器。针对于上传视频等大文件几百M或者几G的大小，就需要等待比较长的时间。这就产生了对应的解决方法，对于大文件上传时的暂停、断网、网络较差的情况下， 使用切片+断点续传就能够很好的应对上述的情况最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
uni-app form表单校验
热门推荐
票票的博客
01-13 2万+
插件 主要对 name 字段进行必填验证，提交事件通过 form-type 绑定 <uni-forms ref="signUpForm" :value="signUpFormData" :rules="rules"> <uni-forms-item label="" name="username"> <uni-easyinput type="number" placeholder="请输入登录手机号码" v-model="signUpFormData.username"
uniapp实现表单验证
qq_53897534的博客
08-17 3933
uniapp实现表单验证，密码可见与不可见
uniapp的表单验证
qq_59076775的博客
07-05 8917
uniapp表单验证
uniapp进行表单效验
weixin_59525879的博客
10-04 1749
这种方法可以根据自己的需求灵活地编写校验规则。例如，可以在提交表单时，对表单中每个输入框的值进行判断，如果不符合要求，则给出相应的提示。需要注意的是，这种方法需要手动编写校验函数，较为繁琐。例如，可以在提交表单时，对表单中每个输入框的值进行判断，如果不符合要求，则给出相应的提示。需要注意的是，这种方法需要手动编写校验函数，较为繁琐。这个组件提供了很多现成的校验规则，比如必填、手机号、邮箱等等，可以轻松实现表单的效验。这个组件提供了很多现成的校验规则，比如必填、手机号、邮箱等等，可以轻松实现表单的效验。
uni-app进行表单效验
weixin_59525879的博客
09-22 861
Uni-app内置了一些表单验证方法，可以帮助我们对表单进行有效的验证。可根据自己的需求进行组合验证，最后根据验证结果来判断表单是否可以提交。
uniapp之表单验证
W010716的博客
12-17 1786
前端表单验证
uniapp uni-forms实现表单校验
Serenity_Qin的博客
01-28 2525
1. 需要设置 name 属性为当前字段名 （与 rules 中的相对应）3. 自定义各个字段的校验规则（validateFunction）4. 表单校验（this.$refs.form.validate）2. 在 onReady 中设置规则。本文为自定义校验归责的实现方法。
uniapp如何进行表单验证
wssg1206的博客
10-09 1942
uni-ui。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值