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温习篇 强大的JQuery选择器
Apr 24 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
浅谈Javascript事件模拟
Jun 27 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
php中序列化与反序列化详解
2017/02/13 PHP
javascript代码加载优化方法
2011/01/30 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
React Router基础使用
2017/01/17 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
python绘图库Matplotlib的安装
2014/07/03 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
旷课检讨书3000字
2014/02/04 职场文书
大跃进口号
2014/06/16 职场文书
护士实习求职信
2014/06/22 职场文书
党员目标管理责任书
2014/07/25 职场文书
神农溪导游词
2015/02/11 职场文书
音乐剧猫观后感
2015/06/04 职场文书
紫日观后感
2015/06/05 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
Golang 对es的操作实例
2022/04/20 Golang
Golang日志包的使用
2022/04/20 Golang