十二、form表单的提交

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

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

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

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

如果两种都加 那是不是同时触发呢？当然不是
@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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89