Vue表单提交点击事件只允许点击一次的实例

2023-07-13 10:31:17 62

常用出现场景：商城点击订单提交

1、使用Vue封装事件

body：

方法：

methods:{
submitOrder(){
//处理逻辑
}
}

2、使用原生JS事件

在数据data里面声明一个flag属性

data(){
return{
isSubmit:true;
}
}

body:

方法：

methods:{
submitOrder(){
if(this.isSubmit){
this.isSubmit=false;
//处理逻辑
}
}
}

补充知识：表单验证提交内容不能为空的几种方法

方法一：

使用css的required属性

方法二：

使用JS代码示例，注意事项：form要加上onSubmit事件，form.xx.vlaue要在表单中对应name


functionbeforeSubmit(form){
if(form.username.value==''){
alert('用户名不能为空！');
form.username.focus();
returnfalse;
}
if(form.password.value==''){
alert('密码不能为空！');
form.password.focus();
returnfalse;
}
if(form.password.value.length<6){
alert('密码至少为6位，请重新输入！');
form.password.focus();
returnfalse;
}
if(form.password.value!=form.password2.value){
alert('你两次输入的密码不一致，请重新输入！');
form.password2.focus();
returnfalse;
}
returntrue;
}



用户注册


用户名：
密码：
重复密码：

方法三：

使用jQuery方法（通过class验证），需要引用jquery.min.js

优势：

1：为input添加class，名字可以随意设置，但每个input需要保持一致，本章案例calss设置为noNull。（若input已有class属性，可直接加到其后）

2：为input添加一个属性，用来后期通过jquery获取该字段，用作提示语。本章案例提示属性为notNull。

3：通过jQuery遍历页面中所有calss为noNull的表单，验证其是否为空，若为空，通过获取notNull的字段，进行为空提示。

具体如何设置，请参照下面的案例。










姓名:





性别:
男
女





年龄：

请选择
1
2






兴趣：
打球
唱歌
跳舞



保存




functionbubmi(){
$(".noNull").each(function(){
varname=$(this).attr("name");
if($(this).val()==""){
alert($(this).attr('notNull')+"不能为空");returnfalse;
}
if($(this).attr("type")=="radio"){
if($("input[name='"+name+"']:checked").size()<1){
alert($(this).attr('notNull')+"不能为空!");
returnfalse;
}
}
if($(this).attr("type")=="checkbox"){
if($('input[name="'+name+'"]:checked').size()<1){
alert($(this).attr('notNull')+"不能为空!");
returnfalse;
}
}
})
}

以上这篇Vue表单提交点击事件只允许点击一次的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

Vue表单提交点击事件只允许点击一次的实例

热门推荐

随机推荐