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


Posted in Javascript onOctober 23, 2020

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

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表单提交点击事件只允许点击一次的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
jQuery事件对象总结
Oct 17 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
基于vue2.0实现简单轮播图
Nov 27 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 #Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 #Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 #Javascript
微信小程序canvas动态时钟
Oct 22 #Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 #Javascript
微信小程序入门之绘制时钟
Oct 22 #Javascript
微信小程序入门之指南针
Oct 22 #Javascript
You might like
解析PHP无限级分类方法及代码
2013/06/21 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
php Session存储到Redis的方法
2013/11/04 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python字符串替换实例分析
2015/05/11 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
python实现简易通讯录修改版
2018/03/13 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
python redis存入字典序列化存储教程
2020/07/16 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
劳动工资科岗位职责范本
2014/03/02 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
保护环境的宣传语
2015/07/13 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python