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

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

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

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

方法三：

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

优势：

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

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

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

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

    
 
 姓名: 

 性别: 男 女

 年龄：  请选择12

 兴趣： 打球 唱歌 跳舞

保存