十二、form表单的提交

最新推荐文章于 2024-10-06 12:26:18 发布

Ming-Afresh

最新推荐文章于 2024-10-06 12:26:18 发布

阅读量486

点赞数

分类专栏： # uni-app 文章标签：前端微信小程序小程序

本文链接：https://blog.csdn.net/start_simple/article/details/126117497

版权

uni-app 专栏收录该内容

17 篇文章 8 订阅

订阅专栏

本文探讨了在Vue.js中如何处理表单提交，包括使用`@submit`和`@click`事件的区别。当用户点击提交按钮时，先触发`onClick`，然后是`onSubmit`。在表单验证中，`onClick`和`onSubmit`都可以用于数据检查，但`onClick`先执行。示例代码展示了如何结合使用这些事件进行表单验证和API调用，确保在表单数据有效且未重复提交时才进行保存操作。

摘要由CSDN通过智能技术生成

信息填报类项目form表单必不可少

这里我们主要用到两种方式

<form @submit="onSubmit">
<view class="uni-form-item">...</view>
<view class="uni-form-item">...</view>
<button form-type="submit">保存</button>

<view class="uni-form-item">...</view>
<view class="uni-form-item">...</view>
<button @click="onClick">保存</button>

如果两种都加那是不是同时触发呢？当然不是
@submit和@click也是区分优先级的如上方法名称举例

onSubmit只能表单上使用，提交表单前会触发，onClick是按钮等控件来使用，用来触发点击事件。在提交表单前，一般都会进行数据验证，可以选择在submit按钮上的onClick中验证，也可以在onSubmit中验证。但是onClick比onSubmit更早的被触发

提交过程
1、用户点击按钮
2、触发onClick事件
3、onClick返回true或未处理onClick
4、触发onSubmit事件
5、onSubmit未处理或返回true
6、提交表单 onSubmit处理函数返回false，onClick函数返回false，都不会引起表单提交
尽可能的只用一种提交方法写得花里胡哨作用都一样两种还占用运行没必要

<template>
	<view class="content">
		<form @submit="onSubmit">
			<view class="uni-form-item">
				<view class="title">天音波</view>
				<view class="input_box"><input type="text" placeholder="请输入" v-model="form.name" maxlength='30' />
			</view>
			<view class="uni-form-item">
				<view class="title">金钟罩</view>
				<view class="input_box"><input type="text" placeholder="请输入" v-model="form.name" maxlength='30' />
			</view>
			<view class="uni-form-item">
				<view class="title">神龙摆尾</view>
				<view class="input_box"><input type="text" placeholder="请输入" v-model="form.name" maxlength='30' />
			</view>
			<view>
				<button form-type="submit" class="sub_btn clo" :disabled="btnDisabled">保存</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
				},
				btnDisabled:false,
			}
		},
		onLoad() {
		
		},
		methods: {
			onSubmit(e){
			  var _this =this;
			  if(_this.btnDisabled){
			  	uni.showToast({
			  		icon:'none',
			  		title:'请勿重复提交'
			  	})
			  }
			  if(_this.form.name==''){
				uni.showToast({
					icon:'none',
					title:'请选择姓名'
				})
				return false
			  }  

			  _this.btnDisabled=true
			  uni.request({
				url: 'Where You Going, Baby?',
				method: 'POST',
				data: {
					name:_this.form.name,
                    ...
				},
				header: {
					'content-type': 'application/json'
				},
				success: res => {
					console.log(res.data);
					if(res.data==1){
						uni.showToast({
							icon:'none',
							title:'上报成功',
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:0
							})
						},1000)
					};
					
				},
				fail: (err) => {
					uni.showToast({
						icon:'none',
						title:err.data.msg,
					})
				},
			  });
			},
		}
	}
</script>