uniapp+vue2、vue3表单

最新推荐文章于 2024-05-25 17:33:09 发布
最新推荐文章于 2024-05-25 17:33:09 发布
阅读量1.5k 收藏 11
点赞数 2
文章标签： uni-app 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sumimg/article/details/126525759
版权

持续学习vue3
在这里插入图片描述
template

<template>
	<view class="formSub">
		<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top">
			<uni-forms-item label="企业名称" name="name">
				<view class="lebelPosition">
					企业名称 <text>*</text>
				</view>
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入企业名称" />
			</uni-forms-item>
			<uni-forms-item label="联系人" name="linkman">
				<view class="lebelPosition">
					联系人 <text>*</text>
				</view>
				<uni-easyinput type="text" v-model="formData.linkman" placeholder="请输入联系人昵称" />
			</uni-forms-item>
			<uni-forms-item label="联系人电话" name="linktel">
				<view class="lebelPosition">
					联系人电话 <text>*</text>
				</view>
				<uni-easyinput type="text" v-model="formData.linktel" placeholder="请输入联系人电话" />
			</uni-forms-item>


			<view class="" v-if="pageFlag==1">
				<uni-forms-item label="日用电量" name="electricityDay">
					<view class="lebelPosition">
						日用电量 <text>*</text>
					</view>
					<uni-easyinput type="text" v-model="formData.electricityDay" placeholder="请输入日用电量" />
				</uni-forms-item>
				<uni-forms-item label="办公地址" name="businessAddress">
					<view class="lebelPosition">
						办公地址 <text>*</text>
					</view>
					<uni-easyinput type="text" v-model="formData.businessAddress" placeholder="请输入办公地址" />
				</uni-forms-item>
			</view>
			<view class="" v-if="pageFlag==2">
				<uni-forms-item label="当前社保缴纳基数" name="socialBase">
					<view class="lebelPosition">
						当前社保缴纳基数 <text>*</text>
					</view>
					<uni-easyinput type="text" v-model="formData.socialBase" placeholder="请输入当前社保缴纳基数" />
				</uni-forms-item>
				<uni-forms-item label="社保缴纳人数" name="socialPerson">
					<view class="lebelPosition">
						社保缴纳人数 <text>*</text>
					</view>
					<uni-easyinput type="text" v-model="formData.socialPerson" placeholder="请输入社保缴纳人数" />
				</uni-forms-item>
				<uni-forms-item label="办公地址" name="businessAddress">
					<view class="lebelPosition">
						办公地址 <text>*</text>
					</view>
					<uni-easyinput type="text" v-model="formData.businessAddress" placeholder="请输入办公地址" />
				</uni-forms-item>
			</view>
			<view class="" v-if="pageFlag==3">

				<uni-forms-item label="企业地址" name="businessAddress">
					<view class="lebelPosition">
						企业地址 <text>*</text>
					</view>
					<uni-easyinput type="text" v-model="formData.businessAddress" placeholder="请输入办公地址" />
				</uni-forms-item>
			</view>
		</uni-forms>
		<view class="formsubBtn">
			<button @click="submit">确认提交</button>
		</view>
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="tanchuceng">
					<view class="from_img">
						<image class="fromimg" src="../../static/from/success.png" mode=""></image>
					</view>

					<view class="from_succ">
						提交成功
					</view>
					<view class="from_text">
						请耐心等待审核...
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

这是vue2

<script>
	
	export default {
		onLoad(option) {

			this.$refs.form.clearValidate([])
			// detail=1 实惠售电  detail=2 灵活用工  detail=3 贷款申请 
			console.log(option, 'option');
			if (option.detail == 1) {
				this.pageFlag = 1
				this.formData.electricityDay = ""
				this.formData.businessAddress = ""
				this.rules.electricityDay = {
					rules: [{
						required: true,
						errorMessage: '请输入日用电量',
					}]
				}
				this.rules.businessAddress = {
					rules: [{
						required: true,
						errorMessage: '请输入办公地址',
					}]
				}
				uni.setNavigationBarTitle({
					title: '实惠售电'
				})
			} else if (option.detail == 2) {
				this.pageFlag = 2
				this.formData.socialBase = ""
				this.formData.socialPerson = ""
				this.formData.businessAddress = ""
				this.rules.socialBase = {
					rules: [{
						required: true,
						errorMessage: '请输入当前社保缴纳基数',
					}]
				}
				this.rules.socialPerson = {
					rules: [{
						required: true,
						errorMessage: '请输入社保缴纳人数',
					}]
				}
				this.rules.businessAddress = {
					rules: [{
						required: true,
						errorMessage: '请输入办公地址',
					}]
				}
				uni.setNavigationBarTitle({
					title: '灵活用工'
				})
			} else {
				this.pageFlag = 3
				this.formData.businessAddress = ""
				this.rules.businessAddress = {
					rules: [{
						required: true,
						errorMessage: '请输入办公地址',
					}]
				}
				uni.setNavigationBarTitle({
					title: '贷款申请'
				})
			}

		},
		data() {
			return {
				pageFlag: 1,
				// 表单数据
				formData: {
					name: '',
					linkman: '',
					linktel: '',

				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入企业名称',
							}
						]
					},
					linkman: {
						rules: [{
							required: true,
							errorMessage: '请输入联系人',
						}]
					},
					linktel: {
						rules: [{
							required: true,
							errorMessage: '请输入联系人电话',
						}]
					},

				}
			}
		},
		methods: {

			submit() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					this.$refs.popup.open('center')
					if(this.pageFlag==3){

						uni.setStorageSync('daikuan', 1)
					}
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						});
					},2000)
					// 清除验证
					// this.$refs.form.clearValidate()
				}).catch(err => {
					console.log('表单错误信息：', err);

				})
			}
		}
	}
</script>

vue3

<script>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	let onloadVal = null
	export default {
		setup() {
			let pageFlag = ref(0)
			const formData = reactive({
				name: '',
				linkman: '',
				linktel: ''
			})
			const rules = reactive({
				// 对name字段进行必填验证
				name: {
					rules: [{
						required: true,
						errorMessage: '请输入企业名称',
					}]
				},
				linkman: {
					rules: [{
						required: true,
						errorMessage: '请输入联系人',
					}]
				},
				linktel: {
					rules: [{
						required: true,
						errorMessage: '请输入联系人电话',
					}]
				},

			})
			const form = ref(null)
			const popup = ref(null)
			onLoad((option) => {

				// form.value.clearValidate([])
				// detail=1 实惠售电  detail=2 灵活用工  detail=3 贷款申请 
				console.log(option, 'option');
				onloadVal = option.detail
				pageFlag.value = onloadVal


			})
			const submit = () => {
				form.value.validate().then(res => {
					console.log('表单数据信息：', res);
					popup.value.open('center')
					if (pageFlag == 3) {

						uni.setStorageSync('daikuan', 1)
					}
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 2000)
					// 清除验证
					// form.value.clearValidate()
				}).catch(err => {
					console.log('表单错误信息：', err);

				})
			}
			onMounted(() => {
				console.log(pageFlag.value, '---');
				if (pageFlag.value == 1) {


					formData.electricityDay = ""
					formData.businessAddress = ""
					console.log(formData, 'formData===');
					rules.electricityDay = {
						rules: [{
							required: true,
							errorMessage: '请输入日用电量',
						}]
					}
					rules.businessAddress = {
						rules: [{
							required: true,
							errorMessage: '请输入办公地址',
						}]
					}
					uni.setNavigationBarTitle({
						title: '实惠售电'
					})
				} else if (pageFlag.value == 2) {

					formData.socialBase = ""
					formData.socialPerson = ""
					formData.businessAddress = ""
					rules.socialBase = {
						rules: [{
							required: true,
							errorMessage: '请输入当前社保缴纳基数',
						}]
					}
					rules.socialPerson = {
						rules: [{
							required: true,
							errorMessage: '请输入社保缴纳人数',
						}]
					}
					rules.businessAddress = {
						rules: [{
							required: true,
							errorMessage: '请输入办公地址',
						}]
					}
					uni.setNavigationBarTitle({
						title: '灵活用工'
					})
				} else {

					formData.businessAddress = ""
					rules.businessAddress = {
						rules: [{
							required: true,
							errorMessage: '请输入办公地址',
						}]
					}
					uni.setNavigationBarTitle({
						title: '贷款申请'
					})
				}
			})
			return {
				pageFlag,
				formData,
				rules,
				submit,
				form,
				popup
			}
		}
	}
</script>

css

<style lang="scss" scoped>
	.formSub {
		background-color: #F6F6F6;
		height: 100vh;
		padding-top: 20upx;

		.tanchuceng {
			width: 535upx;
			height: 274upx;
			border-radius: 10rpx;
			padding: 41upx 0;
			box-sizing: border-box;

			.from_img {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.fromimg {
					width: 68upx;
					height: 67upx;
				}
			}

			.from_succ {
				margin-top: 16upx;
				text-align: center;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #080808;
			}

			.from_text {
				margin-top: 12upx;
				text-align: center;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}

	}
</style>
<style lang="scss">
	.formSub .uni-forms-item.is-direction-top .uni-forms-item__label {
		display: none;
	}

	.formSub .is-input-border {
		border: none;
		border-bottom: 1upx solid #EEEEEE;
		border-radius: 0;
	}

	.formSub .uni-easyinput__content-input {
		text-align: right;
		padding-right: 30upx;
		padding-left: 210upx !important;
	}

	.formSub .uni-forms-item__content {
		position: relative;
		height: 93upx !important;

		.uni-easyinput__content-input {
			height: 93upx !important;
		}

		.lebelPosition {
			position: absolute;
			top: 28upx;
			left: 43upx;
			z-index: 9;

			text {
				color: #D5132B;
			}
		}
	}

	.formSub .uni-forms-item {
		margin-bottom: 0 !important;
	}

	.formSub .uni-forms-item__error {
		z-index: 9;
		// display: none;
	}

	.formsubBtn {
		margin-top: 36upx;

		button {
			width: 696upx;
			height: 85upx;
			background: #01417E;
			border-radius: 4upx;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.formSub {
		.uni-popup .uni-popup__wrapper {
			border-radius: 10upx;
		}
	}
</style>
春风姐姐
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue3 element表单验证 单个验证 单个清除 全部清除
a2357346100的博客
09-19 859
单个验证（某些地方操作需要联动，验证某一个地方）
vue3表单清空失效原因总汇
a1006061435的博客
09-11 2507
vue3表单清空失效原因总汇 一定要加prop属性，否则清空不掉 ref绑定的名字一定要一致，否则还是清空不了 还有就是一定记住要return。。。。。 最后一步调用ruleForm.value.resetFields()即可清空了 ...
你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解
最新发布
RenGJ010617的博客
05-25 5359
onMounted作为vue3中最常用的钩子函数之一，能够灵活、随心应手的使用是每个Vue开发者的必修课，同时根据其不同写法的特性，来选择最合适最有利于维护的写法。
工作314:uni-提交成功加入表单验证
歌谣的博客
01-19 416
增加验证规则 <u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType"> <navigator url="../LevineHua-editor/LevineHua-editor" class="single"> <u-form-item label="荣誉照片" prop="container" label-width="150"> <input plac
uniapp u-form赋值后提示未通过校验
lyxkgc的博客
12-05 1293
加载页面后，给 form.impact 赋值，提交仍然提示未通过校验。 解决： form.impact = “40” ， 改为字符串类型。
uni-app vue3 表单验证两次密码是否相同
多才多多
01-12 1846
uni-app 开发 修改密码, 需要验证两次密码是否相同。网上的全是三个参数的.不带data.不知道是改版了,还是他们瞎写的。在网上找的代码, 都是错误的。最后还是看官方文档才写好。下面是正确的 运行正常。
uni-app开发日志[2022022701]：解决因异步原因导致子组件调用父组件中uni-form表单验证事件时发生的错误及uniform、promise、async、await的同步异步使用注意点
暂时先用这个名字
02-27 4340
uni-form是uniapp官方组件，其中表单验证部分使用异步方式，这样当子组件调用父组件的验证事件时，该验证事件将排在最后执行从而导致无法获得正确验证结果。解决这个问题需要结合表单验证、同步异步、promise、catch、then、async、await等内容。
基于uniapp+Springboot+vue2的汽车租赁平台APP项目源码+数据库
03-26
在这个项目中，Vue2可能被用于uniapp的页面逻辑控制，与uniapp的视图层相配合，实现动态数据加载、表单验证、状态管理等复杂功能。 **数据库**：虽然没有具体指出数据库类型，但通常汽车租赁平台会涉及到MySQL、...
基于Java(SpringBoot) + Vue(Element UI) + UniApp开发的新零售移动电商系统
04-28
JAVA版商城系统是基于Java(SpringBoot) + Vue(Element UI) + UniApp开发的一套新零售移动电商系统 1:有详细的代码注释，有完整系统...11:Vue表单生成控件，拖拽配置表单，减少前端重复表单工作量，提高前端开发效率。
uniapp后台管理系统vue3
02-16
《Vue3在UniApp后台管理系统中的表格与表单组件应用》 在当今的Web开发领域，Vue3框架因其高效、易用和强大的功能而受到广泛关注。尤其在构建后台管理系统时，表格与表单组件是不可或缺的重要组成部分。Vue3在...
基于uniapp+WeUI+colorUI开发设计的一个多平台网上挂号系统源码(微信小程序、支付宝小程序)+项目说明.zip
12-28
同时api接口、表单检验处理等也是经过模块化封装调用； 【备注】 主要针对计算机相关专业的正在做毕设的学生和需要项目实战的Java学习者。 也可作为课程设计、期末大作业。包含：项目源码、数据库脚本、项目说明等
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决...
uniapp如何进行表单验证
wssg1206的博客
10-09 1577
uni-ui。
uniapp实现表单验证
qq_53897534的博客
08-17 3864
uniapp实现表单验证，密码可见与不可见
uni app 可以使用 vue 3吗
weixin_42602241的博客
01-15 734
是的，uni-app 可以使用 Vue 3 作为其开发框架。
uniapp组件-uni-forms表单
热门推荐
03-04 2万+
效果图： 代码实现： <template> <view> <uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext"> <uni-group title="基本信息" top="0"> <uni-forms-item name="name" required label="用户
Vue 3 里的 onMounted 怎么用？
Becomin' Charles
03-20 7197
本文介绍了一个小迷惑，onMounted 和在代码里直接调用的区别，以及什么时候该使用 onMounted。
uniapp，vue3，ts，接口封装、小程序登录
dyx001007的博客
11-28 3794
接口封装，登录
uniapp项目使用vue3
m0_67403188的博客
03-11 4492
uniapp项目使用vue3 1.首先创建普通uniapp项目 2.找到manifest.json文件vue版本选择 选择3 3.重新运行提示： 请确认您的项目模板是否支持vue3:根目录缺少 index.html 在根目录下创建index.html，模板已放在下方 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="view
uniapp vue3 表单写法
10-12
在uniapp中，可以使用Vue3的Composition API来编写表单。具体步骤如下： 1. 在setup函数中定义表单数据和表单验证规则： ``` import { ref } from 'vue' export default { setup() { const formData = ref({ username: '', password: '' }) const rules = { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' } ] } return { formData, rules } } } ``` 2. 在模板中使用uni-form组件来渲染表单： ``` <template> <view> <uni-form :model="formData" :rules="rules"> <uni-form-item label="用户名" prop="username"> <uni-input v-model="formData.username" placeholder="请输入用户名"></uni-input> </uni-form-item> <uni-form-item label="密码" prop="password"> <uni-input v-model="formData.password" type="password" placeholder="请输入密码"></uni-input> </uni-form-item> <uni-form-item> <uni-button type="primary" @click="submitForm">提交</uni-button> </uni-form-item> </uni-form> </view> </template> ``` 3. 在methods中定义submitForm方法来提交表单： ``` import { ref } from 'vue' import { useForm } from '@ant-design-vue/use' export default { setup() { const formData = ref({ username: '', password: '' }) const rules = { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' } ] } const { validate } = useForm(formData, rules) const submitForm = () => { validate().then(() => { // 表单验证通过，可以提交表单 }).catch(() => { // 表单验证不通过，不提交表单 }) } return { formData, rules, submitForm } } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值