十二、form表单的提交

信息填报类项目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>