Vue表单提交点击事件只允许点击一次的实例
更新时间：2020年10月23日 09:03:20 作者：Aybuai
这篇文章主要介绍了Vue表单提交点击事件只允许点击一次的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
常用出现场景：商城点击订单提交
1、使用Vue封装事件
body：
<template> <div> <el-button @click.once="submitOrder()">提交订单</el-button> </div> </template>
方法：
methods: {
submitOrder() {
// 处理逻辑
}
}
2、使用原生JS事件
在数据data里面声明一个flag属性
data() {
return {
isSubmit: true;
}
}
body:
<template> <div> <el-button @click="submitOrder()">提交订单</el-button> </div> </template>
方法：
methods: {
submitOrder() {
if (this.isSubmit) {
this.isSubmit = false;
// 处理逻辑
}
}
}
补充知识：表单验证提交内容不能为空的几种方法
方法一：
使用css的required属性
<input type="" required="required" name="" id="" value="" />
方法二：
使用JS代码示例，注意事项：form要加上onSubmit事件，form.xx.vlaue要在表单中对应name
<script type="text/javascript">
function beforeSubmit(form){
if(form.username.value==''){
alert('用户名不能为空！');
form.username.focus();
return false;
}
if(form.password.value==''){
alert('密码不能为空！');
form.password.focus();
return false;
}
if(form.password.value.length<6){
alert('密码至少为6位，请重新输入！');
form.password.focus();
return false;
}
if(form.password.value!=form.password2.value) {
alert('你两次输入的密码不一致，请重新输入！');
form.password2.focus();
return false;
}
return true;
}
</script>
<fieldset>
<legend>用户注册</legend>
<form method="post" name="form" action="user.do?method=register" onSubmit="return beforeSubmit(this);">
<table border="1" width="100%" cellspacing="0" cellpadding="0">
<tr><td><label>用户名：<input type="text" name="username" value=""></label></td></tr>
<tr><td><label>密 码：<input type="password" name="password" value=""></label></td></tr>
<tr><td><label>重复密码：<input type="password" name="password2" value=""></label></td></tr>
<tr><td><input value="注册" type="submit"> <input type="reset" value="重置"></td></tr>
</table>
</form>
</fieldset>
方法三：
使用jQuery方法（通过class验证），需要引用jquery.min.js
优势：
1：为input添加class，名字可以随意设置，但每个input需要保持一致，本章案例calss设置为noNull。（若input已有class属性，可直接加到其后）
2：为input添加一个属性，用来后期通过jquery获取该字段，用作提示语。本章案例提示属性为notNull。
3：通过jQuery遍历页面中所有calss为noNull的表单，验证其是否为空，若为空，通过获取notNull的字段，进行为空提示。
具体如何设置，请参照下面的案例。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<form>
<!-- input -->
<div>
姓名: <input type="text" name="name" notNull="姓名" class="form-control noNull">
</div>
<br>
<!-- radio -->
<div>
性别:
男<input type="radio" name="sex" value="0" class="noNull" notNull="性别">
女<input type="radio" name="sex" value="1" >
</div>
<br>
<!-- select -->
<div>
年龄：
<select name="age" class="noNull" notNull="年龄">
<option value ="">请选择</option>
<option value ="1">1</option>
<option value ="2">2</option>
</select>
</div>
<br>
<!-- checkbox -->
<div>
兴趣：
打球<input type="checkbox" name="hobby" value="1" class="noNull" notNull="兴趣">
唱歌<input type="checkbox" name="hobby" value="2">
跳舞<input type="checkbox" name="hobby" value="3">
</div>
<br>
<button type="button" class="btn-c" onclick="bubmi()">保存</button>
</form>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function bubmi(){
$(".noNull").each(function(){
var name = $(this).attr("name");
if($(this).val()==""){
alert($(this).attr('notNull')+"不能为空");return false;
}
if($(this).attr("type")=="radio"){
if ($("input[name='"+name+"']:checked").size() < 1){
alert($(this).attr('notNull')+"不能为空!");
return false;
}
}
if($(this).attr("type")=="checkbox"){
if ($('input[name="'+name+'"]:checked').size() < 1){
alert($(this).attr('notNull')+"不能为空!");
return false;
}
}
})
}
</script>
</body>
</html>
以上这篇Vue表单提交点击事件只允许点击一次的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue的开发中,计算属性（Computed Properties）和监听器（Watchers）是两种非常重要的概念,它们都用于响应式地处理数据变化,本文将带你深入了解计算属性和监听器的区别,以及在何时使用它们,感兴趣的朋友可以参考下2023-09-09
本篇文章主要介绍了vue2.x 父组件监听子组件事件并传回信息的方法，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
本篇文章主要介绍了基于Vue实现后台系统权限控制的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
vue cli3.x打包后如何修改生成的静态资源的目录和路径
这篇文章主要介绍了vue cli3.x打包后如何修改生成的静态资源的目录和路径，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue elementui上传图片限制格式、大小和尺寸方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue中keep-alive的用法及问题描述,本文给大家介绍的非常详细，具有一定的参考解决价值，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了Vue-Router源码分析路由实现原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
页面跳转有很多方法,本次使用的是 vue-router,但却在使用 router.push 的时候遇到了点麻烦,所以记录下来,希望可以帮助有需要的人2023-09-09
这篇文章主要给大家介绍了关于Vue中this.$emit()方法的相关资料,this.$emit()是 Vue.js 中一个很有用的方法,可以帮助子组件向父组件传递事件,需要的朋友可以参考下2023-09-09
这篇文章主要给大家介绍了vue3中多个表格怎么同时滚动并且固定表头,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
最新评论