前端uniapp提交表单调用接口方法最新

最新推荐文章于 2025-02-21 09:09:27 发布
最新推荐文章于 2025-02-21 09:09:27 发布
阅读量1k 收藏
点赞数
文章标签： 前端 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_49714202/article/details/134210654
版权

目录

源码1

<template>
	<view class="my-add-bank-card">
		<!-- name="bank_name"  form表单提交的input里面一定要加name绑定要传的参数 name="bank_name" type="text" v-model="address.bank_name"  一定要name和 v-model参数保持一致！！！-->
		<form @submit="formSubmit" @reset="formReset">
			<view class="my-add-bank-card-box">
				<view class="add-card-tit">
					添加银行卡信息
				</view>
				<view class="add-card-list1">
					<view class="add-card-list-name1">
						开户人姓名
					</view>
					<view class="add-card-list1-ipt">
						<input class="popup-input-field" name="bank_user_name" type="text"
							v-model="address.bank_user_name" placeholder="请填写银行卡开户人姓名" />
					</view>
				</view>
				<view class="add-card-list">
					<view class="add-card-list-name1">
						所属银行
					</view>
					<view class="add-card-list1-ipt">
						<input class="popup-input-field" name="bank_name" type="text" v-model="address.bank_name"
							placeholder="请填写所属银行" />
					</view>
				</view>
				<view class="add-card-list">
					<view class="add-card-list-name1">
						开户支行
					</view>
					<view class="add-card-list1-ipt">
						<input class="popup-input-field" name="bank_account" type="number"
							v-model="address.bank_account" placeholder="请填写开户支行" />
					</view>
				</view>
				<view class="add-card-list">
					<view class="add-card-list-name1">
						银行卡号
					</view>
					<view class="add-card-list1-ipt">
						<input class="popup-input-field" name="bank_card" type="number" v-model="address.bank_card"
							placeholder="请填写正确的银行卡号" />
					</view>
				</view>
			</view>
			<view class="bankCardSub">
				<button form-type="submit">提交银行卡信息</button>
			</view>
		</form>
		<!-- 弹窗地址传参数 -->
		<!-- <mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address: {},
			}
		},
		methods: {
			formSubmit(e) {
				let self = this;
				var formdata = e.detail.value;
				// formdata.province_id = self.province_id;//有特殊表单的单独加参数

				// console.log(e, 'formdata');

				// 校验里面formdata就是赋值给formdata对象里面了，然后传参就可以传了

				if (formdata.bank_user_name == '') {
					uni.showToast({
						title: '请输入开户人姓名',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (formdata.bank_name == '') {
					uni.showToast({
						title: '请输入所属银行',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (formdata.bank_account == '') {
					uni.showToast({
						title: '请输入开户支行',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (formdata.bank_card == '') {
					uni.showToast({
						title: '请输入银行卡号',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}


				// if (formdata.phone == '') {
				// 	uni.showToast({
				// 		title: '请输入手机号码',
				// 		duration: 1000,
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }

				// if (formdata.province_id == 0 || formdata.city_id == 0 || formdata.region_id) {
				// 	if (formdata.detail == '') {
				// 		uni.showToast({
				// 			title: '请选择完整省市区',
				// 			duration: 1000,
				// 			icon: 'none'
				// 		});
				// 		return false;
				// 	}
				// }

				self._post('user.user/bindUserBankData', formdata, function(res) {

					// self.showSuccess(res.msg, function() {
					// console.log(self.delta);
					// #ifdef  H5
					// uni.navigateBack({
					// 	delta: parseInt(self.delta)
					// });
					//#endif
					// #ifndef  H5
					// uni.navigateBack({
					// 	delta: 1
					// });
					//#endif
					// });
					
					// console.log(res, '添加成功');
					// 跳到添加成功
					if (res.msg == '添加成功') {
						uni.navigateTo({
							url: '/pages/user/my-bank-card/my-successfully-added-bank-card/my-successfully-added-bank-card'
						})
					} else {
						uni.showToast({
							title: '添加失败',
							duration: 1000,
							icon: 'none'
						});
					}
				});
			},
			/*清空数据*/
			formReset: function(e) {
				console.log('清空数据');
			},
		}
	}
</script>

<style scoped>
	page {
		background: #F8F9FA;
	}

	.my-add-bank-card {
		display: flex;
		flex-direction: column;
	}

	.my-add-bank-card-box {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		margin: 20rpx 32rpx 80rpx 32rpx;
		padding: 24rpx 30rpx 0rpx 30rpx;
		box-sizing: border-box;
	}

	.add-card-tit {
		font-size: 36rpx;
		font-family: Source Han Sans-Medium, Source Han Sans;
		font-weight: 500;
		color: #333333;
		line-height: 50rpx;
		font-weight: bold;
	}

	.add-card-list1 {
		padding-top: 12rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.add-card-list-name1 {
		font-size: 32rpx;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #3D3D3D;
		line-height: 52rpx;
	}

	.add-card-list1-ipt {
		margin-left: 24rpx;
	}

	.add-card-list {
		padding-bottom: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.bankCardSub {
		width: 554rpx;
		height: 84rpx;
		background: #891F50;
		border-radius: 137rpx 137rpx 137rpx 137rpx;
		opacity: 1;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
	}

	.bankCardSub button {
		width: 554rpx;
		height: 84rpx;
		background: #891F50;
		border-radius: 137rpx 137rpx 137rpx 137rpx;
		opacity: 1;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
	}
</style>

源码2

<template>
	<view class="my-add-bank-card">
		<!-- name="bank_name"  form表单提交的input里面一定要加name绑定要传的参数 name="bank_name" type="text" v-model="address.bank_name"  一定要name和 v-model参数保持一致！！！-->
		<form @submit="formSubmit" @reset="formReset">
			<view class="my-add-bank-card-box">
				<view class="add-card-tit">
					编辑银行卡信息
				</view>
				<view class="add-card-list1">
					<view class="add-card-list-name1">
						开户人姓名
					</view>
					<view class="add-card-list1-ipt">
						<input class="popup-input-field" name="bank_user_name" type="text"
							v-model="address.bank_user_name" placeholder="请填写银行卡开户人姓名" />
					</view>
				</view>
				<view class="add-card-list">
					<view class="add-card-list-name1">
						所属银行
					</view>
					<view class="add-card-list1-ipt">
						<input class="popup-input-field" name="bank_name" type="text" v-model="address.bank_name"
							placeholder="请填写所属银行" />
					</view>
				</view>
				<view class="add-card-list">
					<view class="add-card-list-name1">
						开户支行
					</view>
					<view class="add-card-list1-ipt">
						<input class="popup-input-field" name="bank_account" type="number"
							v-model="address.bank_account" placeholder="请填写开户支行" />
					</view>
				</view>
				<view class="add-card-list">
					<view class="add-card-list-name1">
						银行卡号
					</view>
					<view class="add-card-list1-ipt">
						<input class="popup-input-field" name="bank_card" type="number" v-model="address.bank_card"
							placeholder="请填写正确的银行卡号" />
					</view>
				</view>
			</view>
			<view class="bankCardSub">
				<button form-type="submit">提交银行卡信息</button>
			</view>
		</form>
		<!-- 弹窗地址传参数 -->
		<!-- <mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address: {
					bank_user_name: '',
					bank_name: '',
					bank_account: '',
					bank_card: '',
					bank_id: ''
				},
			}
		},
		onLoad(onptions) {
			// console.log(onptions.bank_user_name, '接受bank_user_name');
			// console.log(onptions.bank_name, '接受bank_name');
			// console.log(onptions.bank_account, '接受bank_account');
			// console.log(onptions.bank_card, '接受bank_card');
			this.address.bank_user_name = onptions.bank_user_name;
			this.address.bank_name = onptions.bank_name;
			this.address.bank_account = onptions.bank_account;
			this.address.bank_card = onptions.bank_card;
			this.bank_id = onptions.bank_id;
		},
		methods: {
			formSubmit(e) {
				let self = this;
				var formdata = e.detail.value;
				// formdata.province_id = self.province_id;//有特殊表单的单独加参数

				// console.log(e, 'formdata');

				// 校验里面formdata就是赋值给formdata对象里面了，然后传参就可以传了

				this.bank_id = onptions.bank_id;
				
				formdata.bank_id = self.bank_id;	// 这个就是特殊的上一个页面传过来的参数id

				if (formdata.bank_user_name == '') {
					uni.showToast({
						title: '请输入开户人姓名',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (formdata.bank_name == '') {
					uni.showToast({
						title: '请输入所属银行',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (formdata.bank_account == '') {
					uni.showToast({
						title: '请输入开户支行',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (formdata.bank_card == '') {
					uni.showToast({
						title: '请输入银行卡号',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}


				// if (formdata.phone == '') {
				// 	uni.showToast({
				// 		title: '请输入手机号码',
				// 		duration: 1000,
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }

				// if (formdata.province_id == 0 || formdata.city_id == 0 || formdata.region_id) {
				// 	if (formdata.detail == '') {
				// 		uni.showToast({
				// 			title: '请选择完整省市区',
				// 			duration: 1000,
				// 			icon: 'none'
				// 		});
				// 		return false;
				// 	}
				// }

				self._post('user.user/editBankData', formdata, function(res) {

					// self.showSuccess(res.msg, function() {
					// console.log(self.delta);
					// #ifdef  H5
					// uni.navigateBack({
					// 	delta: parseInt(self.delta)
					// });
					//#endif
					// #ifndef  H5
					// uni.navigateBack({
					// 	delta: 1
					// });
					//#endif
					// });

					// console.log(res, '添加成功');
					// 跳到添加成功
					if (res.msg == '添加成功') {
						uni.navigateTo({
							url: '/pages/user/my-bank-card/my-successfully-edit-bank-card/my-successfully-edit-bank-card'
						})
					} else {
						uni.showToast({
							title: '添加失败',
							duration: 1000,
							icon: 'none'
						});
					}
				});
			},
			/*清空数据*/
			formReset: function(e) {
				console.log('清空数据');
			},
		}
	}
</script>

<style scoped>
	page {
		background: #F8F9FA;
	}

	.my-add-bank-card {
		display: flex;
		flex-direction: column;
	}

	.my-add-bank-card-box {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		margin: 20rpx 32rpx 80rpx 32rpx;
		padding: 24rpx 30rpx 0rpx 30rpx;
		box-sizing: border-box;
	}

	.add-card-tit {
		font-size: 36rpx;
		font-family: Source Han Sans-Medium, Source Han Sans;
		font-weight: 500;
		color: #333333;
		line-height: 50rpx;
		font-weight: bold;
	}

	.add-card-list1 {
		padding-top: 12rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.add-card-list-name1 {
		font-size: 32rpx;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #3D3D3D;
		line-height: 52rpx;
	}

	.add-card-list1-ipt {
		margin-left: 24rpx;
	}

	.add-card-list {
		padding-bottom: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.bankCardSub {
		width: 554rpx;
		height: 84rpx;
		background: #891F50;
		border-radius: 137rpx 137rpx 137rpx 137rpx;
		opacity: 1;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
	}

	.bankCardSub button {
		width: 554rpx;
		height: 84rpx;
		background: #891F50;
		border-radius: 137rpx 137rpx 137rpx 137rpx;
		opacity: 1;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
	}
</style>

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！

MFG_666
关注
Uniapp表单提交
m0_72189003的博客
07-09 646
【代码】Uniapp表单提交。
uniapp表单校验和提交
weixin_43453621的博客
07-25 6515
用到u-viewui框架（推荐，因为确实好看），明显已经校验并提交到服务器，得到数据返回。
uniapp(三) 之 表单提交
沉淀，积累、进步
06-06 2201
vue3环境下uni-forms的使用与校验
uniapp--表单：form
魏依一的博客
02-06 1896
携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}，report-submit 为 true 时才会返回 formId。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。单项选择器，内部由多个 组成。通过把多个radio包裹在一个radio-group下，实现这些radio的单选。e中为表单中传过来的值。
uni-app 表单提交按钮发送请求
weixin_49393290的博客
12-02 5031
目前页面是以下这样 代码部分 <html> 举一两个输入框的例子 <view class="content"> <view class="row b-b"> <text class="tit">姓名</text> <input class="input" type="text" v-model="addressData.name" placeholder=".
衣服定制前端uniapp加入 支付功能 衣服定制参数
11-13
在这个项目中，“衣服定制前端uniapp加入 支付功能 衣服定制参数”指的是在uniAPP开发的衣服定制应用中集成支付功能，并且允许用户自定义衣服的参数。 首先，我们需要理解uniAPP的核心特性。uniAPP是由DCloud（北京...
地址模块丨前端uniapp微信小程序项目
weixin_49376454的博客
05-26 1227
地址模块丨前端uniapp微信小程序项目地址模块丨前端uniapp微信小程序项目
前端uniapp后端PHP客户关系管理系统源码crm源码APP+h5
baixiaoxinhua的博客
08-18 1118
首先概述了CRM系统的重要性和市场背景，随后详细阐述了系统的设计思路、技术选型、功能实现、性能测试及优化措施。CRM系统通过集成技术解决方案，帮助企业实现客户信息的集中管理、销售流程的自动化、团队协作的高效化以及数据分析的智能化。在前端，可以设计一个联系人列表页面，用于展示所有联系人的信息，并提供添加、编辑和删除联系人的功能。实现销售机会的跟踪和管理功能，包括销售漏斗和销售预测的可视化。在CRM系统中，联系管理是一个重要的功能，它允许用户记录和管理与客户相关的所有联系人信息，如电话号码、电子邮件、职位等。
奈雪的茶uniapp前端页面模板
04-21
【奈雪的茶uniapp前端页面模板】是一个专为构建类似奈雪的茶风格的移动端应用界面而设计的模板项目，基于热门的前端框架uniapp。uniapp是一个使用Vue.js开发的多端合一的框架，它允许开发者用一套代码同时在iOS、...
uniapp精美ui模板
05-27
在uniapp中，JavaScript作为主要的编程语言，用于控制UI组件的行为，响应用户操作，处理数据，以及调用uniapp提供的API进行设备访问和网络请求。Vue.js的出现使得JavaScript在前端开发中的使用更加简洁和高效。 ...
uni-app配置表单示例修正版
05-11
基于uni-app插件市场中"配置表单"修改，修正原版不能运行的错误，通过传入配置数据动态渲染出表单，目前支持的表单组件有text,number,textarea,radio,checkbox,date,select,html。支持配置必填以及正则校验。提供填写，展示两种状态模式。
UNIAPP实现的复杂功能：动态表单生成与提交功能
安
02-21 677
UNIAPP实现的复杂功能：动态表单生成与提交功能
uniapp---form（4）---from表单的应用
m0_75047254的博客
07-28 3776
第一步：添加一个按钮，并且按钮的form-type属性添加为submit。想要在form表单的submit中得到值。这需要为其添加上name属性。第三歩：在生命周期methods里创建formSubmit方法接受值。第一步：添加一个按钮，并且按钮的form-type属性添加为reset。第三歩：点击reset按钮，即可清空form表单的内容。第二歩：在form表单的组件中添加事件 @submit。第二歩：在form表单的组件中添加事件 @reset。（1）使用submit提交表单获取信息。
uniapp组件-uni-forms表单案例
jxzdezhanhao的博客
03-22 8810
代码实现： <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="用户名"&gt..
uni-app.02.提交form表单的两种方式
热门推荐
潮汐先生的专栏
03-17 1万+
uni-app提交form表单的两种方式uni-app提交form表单的两种方式form表单元素较少form表单元素较多前端代码举例：后端java代码举例 uni-app提交form表单的两种方式 form表单元素较少 比如用户登录，如下图 此时html代码如下，省略了部分多余代码 <template> <view style="padding:50rpx;"> <view style="margin-top:60rpx;"> <form @submi
uniapp应用form表单上传数据与数据库数据的查询排序
qq_37455326的博客
10-23 730
uniapp应用form表单上传数据与数据库数据的查询排序
uniapp 表单页面_uniapp form表单提交，数据格式验证
weixin_29349409的博客
02-11 2871
uniapp form表单提交，数据格式验证前端页面姓名：性别：男女出生日期：患者电话：初步诊断：检查项目：JSmethods: {formSubmit:function(e){let tmp = JSON.stringify(e.detail.value)console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))...
uniapp表单提交，传值picker
Csignificanc的博客
03-23 2385
uniapp表单提交，传值picker 套用就好，里边有picker,input传值方法. 先上代码!!! <template> <view class="content"> <!--用户id --> <!-- <view class="row b-b"> <text class="tit">id号</text> <input class="input" :value="UserInfo.
uniapp js 用dom创建form表单 并提交
前端小胡兔的博客
07-10 438
input.value = '这里是需要提交的数据';// 设置input的value属性。// 设置input的name属性。// 设置form的method和action属性。// 将input添加到form中。// 将form添加到body中。// 创建一个input元素。// 创建一个新的form元素。
前端uniapp接入captcha
最新发布
04-26
### UniApp 前端集成 Captcha 验证实现方案 在 UniApp 中接入 Captcha 验证功能可以通过自定义组件的方式完成。以下是详细的实现方法： #### 1. 创建 Captcha 组件 创建一个新的 Vue 组件 `Captcha.vue`，用于封装腾讯验证码逻辑。 ```vue <template> <view class="captcha-container"> <!-- 容器 --> <div ref="captchaContainer"></div> </view> </template> <script> export default { name: 'Captcha', props: ['appId', 'callback'], // 接收 appId 和回调函数作为参数 mounted() { this.initCaptcha(); }, methods: { initCaptcha() { const container = this.$refs.captchaContainer; if (!container) return; new TencentCaptcha(container, this.appId, (res) => { // 调用父组件传递的回调函数处理结果 if (typeof this.callback === 'function') { this.callback(res); } }, { type: 'embed' }).show(); // 使用嵌入式模式 } } }; </script> <style scoped> .captcha-container { width: 100%; height: auto; } </style> ``` 此部分代码实现了通过传入 `appId` 和回调函数来初始化并显示验证码的功能[^1]。 --- #### 2. 在父组件中引入并使用 Captcha 组件 修改父组件以加载和调用 Captcha 功能。 ```vue <template> <view> <!-- 验证码 --> <Captcha :appId="captchaAppId" @callback="handleCaptchaResponse" /> <button @click="submit">提交</button> </view> </template> <script> import Captcha from '@/components/Captcha'; export default { components: { Captcha, }, data() { return { captchaAppId: 'your-captcha-app-id-here', // 替换为实际 App ID captchaResult: null, }; }, methods: { handleCaptchaResponse(response) { console.log('Captcha Response:', response); this.captchaResult = response.ticket; // 存储 ticket 数据以便后续使用 }, submit() { if (!this.captchaResult) { alert('请先完成验证码验证'); return; } // 提交表单或其他操作... console.log('Submit with Captcha Ticket:', this.captchaResult); }, }, }; </script> ``` 在此代码片段中，父组件负责接收子组件返回的结果并通过按钮触发进一步的操作。 --- #### 3. 初始化腾讯验证码 SDK 为了使上述代码正常工作，需确保已在项目中正确配置腾讯验证码 SDK。可以按照以下步骤操作： - 下载腾讯验证码 JS 文件或将 CDN 地址加入 HTML 页面头部。 - 如果使用 NPM 或 Yarn，则可通过安装依赖包完成导入。 示例： ```javascript // main.js 或其他入口文件 import '@tencent/captcha'; // 确保路径正确或替换为 CDN 引入方式 ``` 或者直接在页面中添加脚本标签： ```html <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script> ``` 以上步骤基于官方文档说明[^2]^。 --- #### 4. 测试与优化 测试时注意检查以下几点： - 是否成功渲染验证码； - 用户交互完成后是否能正确获取到票券数据 (`ticket`) 并回传给服务器； - 不同设备上的兼容性和样式调整。 更多细节可参考 [AnJi Plus 的 Captcha 文档](https://captcha.anji-plus.com/#/)，其中提供了丰富的跨平台解决方案[^3]。 --- ### 注意事项 - **安全性**：始终将最终校验逻辑放置于服务端执行，防止伪造请求。 - **用户体验**：合理控制验证码出现频率以免影响正常使用体验。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值