[#0x0053] 阻止 form submit 的方法

本文深入探讨了如何在HTML表单中自定义提交逻辑和验证过程,通过使用`<form onsubmit=...>`和`<input type=submit onclick=...>`元素实现表单提交前的复杂验证和控制,确保数据的有效性和安全性。通过实例展示了如何在表单提交前执行校验函数,以及如何针对不同操作(如撤销)编写特定的逻辑,确保用户交互的高效性和用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

有两个地方可以可以阻止form submit,一是<form onsubmit="">,而是<form>下的<input type="submit" onclick="">,只要这两个函数有一个是return false;,那么点击这个button并不会submit form。

 

具体的执行流程是这样的:

if (submitInput.onclick() == false) {
	// 不触发 form.onsubmit();
	// form 不提交;
} else {
	// 触发 form.onsubmit();
	if (form.onsubmit() == false) {
		// form 不提交
	} else {
		// 提交 form
	}
}

 

所以在这个两个函数里面可以加一些验证工作,同时,可以根据验证结果来判断是否提交form。

比如有:

var checkForm = function() {
	// 获取输入
	if (校验失败)
		return false;
	else
		return true;
}

 

然后把这个函数写到onsubmit或是onclick,也可以针对不同的button写不同的逻辑的校验函数,比如这样:

<html>
	<form onsubmit="return checkFormStep2();" method="post" action="/XXX.do">
		<input type="text" id="username">
		<input type="password" id="password">

		<input type="submit" onclick="return checkFormStep1();" value="go" />
	</form>
</html>

在点击时先执行checkFormStep1(),在form提交前再执行checkFormStep2(),两个都通过都return true了才提交

 

也可以针对“撤销”功能的按钮写一些类似清空输入的功能,再禁止它提交form,比如这样:

<html>
	<form method="post" action="/XXX.do">
		<input type="text" id="username">
		<input type="password" id="password">

		<input type="submit" onclick="return checkFormStep();" value="go" />
		<input type="submit" onclick="clearInput(); return false;" value="reset" />
	</form>
</html>

 

//提交添加帧 const submitForm = async () => { try { await formRef.value.validate() const message = frameArray.value.length === 0 ? &#39;帧结构与协议之后无法切换,确认提交?&#39; : &#39;确认提交?&#39; ElMessageBox.confirm(message, &#39;添加帧&#39;, { confirmButtonText: &#39;确定&#39;, cancelButtonText: &#39;取消&#39;, type: &#39;warning&#39; }).then(() => { // 设置自动填充的值 console.log(currentProtocol.value) frameFrom.value.frameheadId = currentFramehead.value.frameheadId frameFrom.value.protocolId = currentProtocol.value.nprotocolId //frameFrom拼接到frame上 frame.value = { ...frame.value, ...frameFrom.value } // 添加到数组 frameArray.value.push(frame.value) // 这里处理提交逻辑 console.log(&#39;提交数据frameArray:&#39;, frameArray.value) addFrameDialogVisible.value = false }) } catch (error) { console.error(&#39;表单验证失败:&#39;, error) } } <el-button type="primary" :icon="Edit" v-if="selectedFrame" @click="frameEdit" circle style="margin-bottom: 0.125rem" /> <el-select v-model="selectedFrameIdcode" placeholder="选择帧" class="frame-select" clearable > <el-option v-for="item in frameArray" :key="item.frameIdcode" :label="item.name" :value="item.frameIdcode" /> </el-select>const selectedFrame = computed(() => { return frameArray.value.find( (item) => item.frameIdcode === selectedFrameIdcode.value ) }) //选择的帧的详细信息<!-- 新增帧弹窗 --> <el-dialog title="新增帧" v-model="addFrameDialogVisible" width="30%" @close="resetForm" ><el-form :model="frameFrom" :rules="rules" ref="formRef" label-width="100px" > <!-- 帧编码 --> <el-form-item label="帧编码" prop="frameIdcode"> <el-input v-model="frameFrom.frameIdcode" placeholder="请输入16进制编码" ><template #prepend>0x</template></el-input > </el-form-item> <!-- 名称 --> <el-form-item label="名称" prop="name"> <el-input v-model="frameFrom.name" placeholder="请输入名称" maxlength="20" show-word-limit /> </el-form-item> <!-- 描述 --> <el-form-item label="描述" prop="desc"> <el-input v-model="frameFrom.desc" type="textarea" :rows="3" placeholder="请输入描述" maxlength="255" show-word-limit /> </el-form-item></el-form ><template #footer> <el-button @click="addFrameDialogVisible = false">取消</el-button> <el-button type="primary" @click="submitForm">确定</el-button> </template></el-dialog > 实现frameEdit
04-01
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值