uniapp实现表单验证

已于 2023-08-28 14:16:42 修改
阅读量3.9k 收藏 31
点赞数 6
分类专栏： uniapp js 前端 文章标签： 前端
于 2022-08-17 00:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53897534/article/details/126362032
版权
前端 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
uniapp
2 篇文章 0 订阅
订阅专栏
js
2 篇文章 0 订阅
订阅专栏

平时我们经常会使用到表单，并且还需要实现密码的眼睛点击变化时，密码的内容也会在享受正常格式和密码格式之间来进行切换，在提交时会经常使用到表单验证，所以就自己简单的写了一个表单验证。

效果图：

 代码：

<template>
	<view class="updata">
		<!-- 个人信息 -->
		<view class="archives">
			<view class="archives-title">
				<text>基本信息</text>
			</view>
			<view class="archives-form">
				<view class="archives-form-item">
					<view class="afi-label">
						<text></text>
						<text>姓名</text>
					</view>
					<input type="text" v-model="fromdata.name" placeholder="请输入">
					<text></text>
				</view>
				<view class="archives-form-item" @click="bindPicker('gender')">
					<view class="afi-label">
						<text></text>
						<text>性别</text>
					</view>
					<input type="text" v-model="fromdata.gender" placeholder="请选择" disabled>
					<u-icon name="arrow-right" size="20" color="#aeacaf"></u-icon>
				</view>
				<view class="archives-form-item">
					<view class="afi-label">
						<text></text>
						<text>手机号</text>
					</view>
					<input type="text" v-model="fromdata.phone" placeholder="请输入">
					<text></text>
				</view>
				<view class="archives-form-item" @click="toUrl('/pagesAdmin/staffManagement/organization')">
					<view class="afi-label">
						<text></text>
						<text>组织结构</text>
					</view>
					<input type="text" v-model="fromdata.organization" placeholder="请选择" disabled>
					<u-icon name="arrow-right" size="20" color="#aeacaf"></u-icon>
				</view>
				<view class="archives-form-item">
					<view class="afi-label">
						<text></text>
						<text>所属门店</text>
					</view>
					<view style="color: gainsboro;">{{fromdata.organization}}</view>
				</view>
				<view class="archives-form-item">
					<view class="afi-label">
						<text></text>
						<text>密码</text>
					</view>
					<input v-show="oldPwdShow" type="password" v-model="fromdata.pwd" placeholder="至少8位数,包括字母和数字">
					<input v-show="!oldPwdShow" type="text" v-model="fromdata.pwd" placeholder="至少8位数,包括字母和数字">
					<view @click="changeShowOldPwd">
					<view v-show="oldPwdShow">
					<u-icon name="/static/icon/hidden.png" size="24" color="#aeacaf"></u-icon>
					</view>
					<view v-show="!oldPwdShow">
					<u-icon name="/static/icon/show.png" size="24" color="#aeacaf"></u-icon>
					</view>
					</view>
				</view>
				<view class="archives-form-item">
					<view class="afi-label">
						<text></text>
						<text>确认密码</text>
					</view>
					<input v-show="newPwdShow"  type="password" v-model="fromdata.pwd_confirm" placeholder="请再次输入密码">
					<input v-show="!newPwdShow"  type="text" v-model="fromdata.pwd_confirm" placeholder="请再次输入密码">
					<view @click="changeShowNewPwd">
					<view v-show="newPwdShow">
					<u-icon name="/static/icon/hidden.png" size="24" color="#aeacaf"></u-icon>
					</view>
					<view v-show="!newPwdShow">
					<u-icon name="/static/icon/show.png" size="24" color="#aeacaf"></u-icon>
					</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 选择权限包 -->
		<view class="archives">
			<view class="archives-title">
				<text>选择权限包</text>
			</view>
			<view class="archives-form">
				<view class="archives-form-item" @click="toUrl('/pagesAdmin/staffManagement/jurisdictionList')">
					<view class="afi-label">
						<text></text>
						<text>权限包</text>
					</view>
					<input type="text" v-model="fromdata.jurisdiction" placeholder="请选择" disabled>
					<u-icon name="arrow-right" size="20" color="#aeacaf"></u-icon>
				</view>
			</view>
		</view>
		<view class="bottom-btn">
			<button type="default" @click="submit(fromdata)">保存</button>
		</view>
		<!-- 选择器 -->
		<u-picker mode="multiSelector" :closeOnClickOverlay="true" :show="pickerShow" :columns="columns"
			@confirm="pickerConfirm" @cancel="pickerShow = false" @close="pickerShow = false"></u-picker>
	</view>
</template>

<script>
	import {stuffCreateApi} from '@/api/mine.js'
	export default {
		components: {},
		data() {
			return {
				fromdata:{
					name:'', //姓名
					gender: '男', //性别
					phone:'', //手机号
					organization:'', //组织结构
					shop_id:'', //所属门店
					pwd:'',//密码
					pwd_confirm:'',  //确认密码
					jurisdiction:[],  //权限包
				},
				columns: [], //选择器绑定数据
				gender: [ //性别
					['男', '女']
				],
				pickerShow: false, //picker选择器显示
				oldPwdShow:true,
				newPwdShow:true
			}
		},
		onLoad(option) {
			this.fromdata.organization = option.organization
		},
		onShow() {},
		methods: {
			toUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			// 显示picker选择器 绑定选择器数据
			bindPicker(val) {
				this.columns = this[val];
				this.pickerShow = true;
			},
			// picker选择器  确定
			pickerConfirm(e) {
				console.log(e)
				this.fromdata.gender = e.value[0];
				console.log(this.form)
				this.pickerShow = false;
			},
			changeShowOldPwd(){		
				this.oldPwdShow = !this.oldPwdShow
			},
			changeShowNewPwd(){
				this.newPwdShow = !this.newPwdShow
			},
			submit(data){
				let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				let passwordReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
				if(!this.fromdata.name){
					uni.showToast({
						title:"名字不能为空",
						icon:"none"
					})
return
				}
if(!phoneReg.test(this.fromdata.phone)|| !this.fromdata.phone){
					uni.showToast({
						title:"手机格式不正确",
						icon:"none"
					})
return
				}
if(!this.fromdata.organization){
					uni.showToast({
						title:"请选择组织结构",
						icon:"none"
					})
return
				}
if(!passwordReg.test(this.fromdata.pwd)){
					uni.showToast({
						title:"密码长度应为8-16位，包含数字和字母",
						icon:"none"
					})
return
				}
if(this.fromdata.pwd_confirm !== this.fromdata.pwd){
					uni.showToast({
						title:"两次输入密码不一致，请重新输入",
						icon:"none"
					})
return
				}
if(!this.fromdata.jurisdiction){
					uni.showToast({
						title:"请至少选择一个权限包",
						icon:"none"
					})
return
				}

					stuffCreateApi(this.fromdata).then(res=>{
						console.log(res);
					})
			}
		}
	}
</script>

<style>
	button::after {
		border: none;
	}
</style>

<style scoped lang="scss">
	// 个人信息
	.archives {}

	.archives-title {
		padding: 20rpx 30rpx;
		background: #f5f2f8;
		font-size: 28rpx;
		color: #979698;
	}

	.archives-form {
		padding: 0 30rpx;
	}

	.archives-form-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f2f8;

		input {
			width: 100%;
		}

		text {
			flex-shrink: 0;
		}
	}

	.afi-label {
		display: flex;
		align-items: center;
	}

	.afi-label>text:nth-child(1) {
		color: red;
		font-size: 26rpx;
		line-height: 30rpx;
		min-width: 20rpx;
	}

	.afi-label>text:nth-child(2) {
		min-width: 200rpx;
	}
	.bottom-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 30rpx ;
		padding-top: 10rpx;
		box-shadow: -2rpx 0 20rpx 2rpx #e0e5eb;
		position: fixed;
		background: #fff;
		z-index: 10;
		left: 0;
		bottom: 0;
		width: 100%;
	}
	
	.bottom-btn>button {
		padding: 6rpx 0;
		width: 80%;
		border-radius: 50rpx;
		background: orange;
		color: white;
		font-size: 34rpx;
		border: 1rpx solid #f3f3f8;
		line-height: 80rpx;
	}
</style>

前端中的开发小白
关注
专栏目录
uni-app 表单验证
qq_32914215的博客
01-21 5528
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
Uniapp 相关笔记
Ndbsa的博客
12-03 378
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。OBJECT参数说明：参数类型必填说明urlString是需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔； 不可到tabBar 页 uni.redirectTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面。OBJECT参数说明参数类型必填说明urlString是需要跳转的应用内非 tabBar的页面的路径，路径后可以带
uniapp之表单校验
一步一个脚印，踏实努力，向着目标前进
07-15 6978
在插件中，你可以使用属性来定义自定义的校验规则。rulevalue和callback。rule是当前校验规则的对象，包含了校验的条件和错误提示信息。value是要校验的字段的值。callback是一个回调函数，用于通知校验结果。如果校验通过，可以调用callback()；如果校验不通过，可以调用callback(new Error('错误信息'))。if(value!callback(new Error('自定义字段必须为 "custom"'));
uni-app内置组件(基本内容，表单组件)（）二
最新发布
chengcheng9876的博客
08-09 1276
uni-app内置组件(基本内容，表单组件)（）二
uniapp的表单验证
qq_59076775的博客
07-05 8921
uniapp表单验证
uniapp表单验证
weixin_44042792的博客
04-25 9623
表单验证不触发解决办法 第一个参数传入当前表单组件所在的 name，同当前父组件uni-forms-item绑定属性name的值 第二个参数传入需要校验的值，内置组件可以通过$event.detail.value获取到组件的返回值，自定义组件传入需要校验的值即可 第三个参数传入uni-forms组件绑定属性ref的值，通常在多表单的时候需要传入，用来区分表单，如页面中仅有一个uni-forms可忽略 1：直接在input中加入@input="binddata('email',$...
uniapp 表单验证
y_f__的博客
06-17 888
<template> <uni-forms ref="form" :value="formData" :rules="rules" validate-trigger="bind" err-show-type="undertext"> <uni-forms-item class="form-item" label=" 姓名" required label-width="120" name="realName"> <uni-easyinput type="t
uniapp 动态表单验证
09-15
在uniapp中实现动态表单验证，可以使用Vue的表单验证方法。在你提供的代码中，可以看到使用了Vue的$refs来获取表单的引用，并使用validate()方法进行验证。具体步骤如下： 1. 定义一个开关变量subStatus来记录验证...
uniapp表单验证方法封装
weixin_44694389的博客
12-10 2333
本次代码完全是uniapp官方源码，写在这里是记录笔记，如果想看源码，可以打开uniapp软件新建项目，选择uniapp官方项目案例即可。 本次目的是学习代码规范，因为觉得自己写的代码太臃肿，后期维护太难。 1.在根目录新建文件common,在文件里面新建一个js文件，名称随意。 //graceChecker.js /** 数据验证（表单验证） 来自 grace.hcoder.net 作者 hcoder 深海 */ export default { error:'', check : fu
uniapp设置表单验证
05-31
Uniapp是一个基于Vue.js框架的跨平台应用开发工具，支持使用Vue语法进行开发，同时支持编译成多种平台的应用。...以上就是使用Vue.js的表单验证方式进行Uniapp表单验证的基本步骤。如果您有任何问题，请随时提出。
javascript,小程序,uni-app通用的验证类
12-02
javascript,小程序,uni-app通用的验证类,内置常用的验证方法。。//使用用方法 /* *valit_rule验证规则 *value，验证数据form *true ，一次性全部检测完 / //var vali_result = validate.check(this.data.valit_rule, value, true) /* // valit_rule: { pwdo: [ //【提示信息,规则名,规则参数】 ['原密码', 'length', [1, 20]], ], //密码,多条规则 pwd: [ ['新密码长度', 'length', [6, 20]], ['两次新密码', 'confirm', 'pwdr'], ['新密码', config.conf.pwd_level] ], mobile: [ ['手机号不合规', 'mobile'], ] } }, */
自定义表单验证
05-13
简单的js表单验证 <script type="text/javascript"> function validatename(){ var userN=document.myform.userName.value; if(userN.length==0){ document.getElementById("nerror").innerHTML="请输入用户名！"; return false; } else{ for(var i=0; i<userN.length;i++) { var un=userN.substring(i,i+1); if(!(un>="a" && un<="z") && !(un>="A" && un<="Z")){ document.getElementById("nerror").innerHTML="用户名中不能包含数字与特殊字符！"; return false; } } document.getElementById("nerror").innerHTML=""; return true; } } function validatePW(){ var userPW=document.myform.userPassWord.value; if(userPW.length==0){ document.getElementById("pwerror").innerHTML="请输入密码！"; return false; } else if(userPW.length<6){ document.getElementById("pwerror").innerHTML="密码长度不能小于6位并且不能包含特殊字符" } } function validate(){ if(validatename() && validatePW()) { return true; } return false; } </script>
uni-app 表单校验
weixin_35756690的博客
12-20 1175
uni-app 是一个使用 Vue.js 开发跨平台应用的框架。表单校验是指在提交表单之前对表单中的数据进行检验的过程。 在 uni-app 中，可以使用 Vue.js 的表单验证插件或自定义表单校验逻辑来实现表单校验。 举个例子，如果你想要在 uni-app 中实现一个表单，其中包含一个电子邮件地址的输入框，并且希望在用户提交表单之前检查输入的电子邮件地址是否合法，你可以这样做： 在表单模板中...
uniapp 表单校验
weixin_49684489的博客
11-24 1421
uniapp 表单校验
uniapp如何进行表单验证
wssg1206的博客
10-09 1968
uni-ui。
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之表单验证
W010716的博客
12-17 1788
前端表单验证
uniapp进行表单效验
weixin_59525879的博客
10-04 1758
这种方法可以根据自己的需求灵活地编写校验规则。例如，可以在提交表单时，对表单中每个输入框的值进行判断，如果不符合要求，则给出相应的提示。需要注意的是，这种方法需要手动编写校验函数，较为繁琐。例如，可以在提交表单时，对表单中每个输入框的值进行判断，如果不符合要求，则给出相应的提示。需要注意的是，这种方法需要手动编写校验函数，较为繁琐。这个组件提供了很多现成的校验规则，比如必填、手机号、邮箱等等，可以轻松实现表单的效验。这个组件提供了很多现成的校验规则，比如必填、手机号、邮箱等等，可以轻松实现表单的效验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值