-
防止INPUT按回车自动提交form表单
2020-10-16 15:49:06当前页面有一个查询框,当该input框按下回车键时,希望默认走查询方法,从列表中查询符合条件的成员,但是浏览器默认的情况下,在input框按下回车键,会触发表单提交(保存按钮)。 解决思路: 阻止表单上按下回车...需求描述:
当前页面有一个查询框,当该input框按下回车键时,希望默认走查询方法,从列表中查询符合条件的成员,但是浏览器默认的情况下,在input框按下回车键,会触发表单提交(保存按钮)。
解决思路:
- 阻止表单上按下回车键时自动提交;
- 给input框绑定事件,指定当按下回车键时触发查询;
实现代码
<form id="search_form" class="form-horizontal clearfix" role="form" method="post"> <div class="col-sm-7 form-group"> <label class="col-xs-4 control-label">姓名</label> <div class="col-xs-8"> <input type="text" class="form-control" name="name" onkeydown="gosearch(event);" autocomplete="off"/> </div> </div> <div class="col-sm-5 form-group text-right"> <div class="col-xs-12"> <a class="btn btn-info" href="javascript:submitSearchForm()"><i class="fa fa-search"></i>查询</a> <a class="btn btn-default" href="javascript:resetForm('search_form')"><i class="fa fa-undo"></i>重置</a> </div> </div> </form>
1. 阻止表单上按下回车键时自动提交; function init() { function keydownFn(e) { if(e.which===13){ e.preventDefault(); } } var $f = document.getElementById('search_form'); $f.addEventListener('keydown', keydownFn); } init(); 2. 给input框绑定事件,指定当按下回车键时触发查询; function gosearch(e) { var evt = window.event || e; if (evt.keyCode == 13){ //回车事件 submitSearchForm(); } } function submitSearchForm(){ var params = $("#search_form").serializeJSON(); $("#user_table").datagrid("load", params); }
-
Angular JS实现表单提交(json格式数据)
2018-08-21 17:55:27Angular的特点即为数据绑定,利用angular这一特点,可以减少传统表单提交获取表单数据繁琐的dom操作。 方法:给form里的每个表单控件绑定angular对象:使用ng-model <form name="envForm" ...Angular的特点即为数据绑定,利用angular这一特点,可以减少传统表单提交获取表单数据繁琐的dom操作。
方法:给form里的每个表单控件绑定angular对象:使用ng-model
<form name="envForm" novalidate> <div > <div class="row"> <div class="col-xs-offset-1 col-xs-4"> <div class="form-group" ng-class="error.newItem.environmentName?'':'has-error'"> <label class="control-label">环境名称 <input type="text" class="form-control" ng-model="env.newItem.environmentName" ></label> </div> </div> <div class="col-xs-offset-2 col-xs-4" style="height:74px"> <div class="form-group"> <label class="control-label">项目名称 <div class="dropdown" style="height:33px"> <input class="btn btn-default dropdown-toggle" ng-model="env.newItem.projectKey" id="newPageDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="width: 270px" readonly/> <span class="caret" style="margin-left: 247px;margin-top: -55px"></span> <ul class="dropdown-menu" aria-labelledby="newPageDropdownMenu"> <li ng-repeat="x in configs"><a href="javascript:void(0)" ng-click="selectAndFill(x.constName)">{{x.constName}}</a></li> </ul> </div> </label> </div> </div> </div> <div class="row"> <div class="col-xs-offset-1 col-xs-4"> <div class="form-group"> <label>svn地址 <input type="text" class="form-control" ng-model="env.newItem.svnAddress" id="svnAddress" name="svnAddress"></label> </div> </div> <div class="col-xs-offset-2 col-xs-4"> <div class="form-group"> <label>入口地址 <input type="text" class="form-control" ng-model="env.newItem.entryAddress" id="entryAddress" name="entryAddress" ></label> </div> </div> </div> <div class="row"> <div class="col-xs-offset-1 col-xs-4"> <div class="form-group"> <label>运行jdk <input type="text" class="form-control" ng-model="env.newItem.jdkVersion" id="jdkVersion" name="jdkVersion"></label> </div> </div> <div class="col-xs-offset-2 col-xs-4"> <div class="form-group"> <label>数据库地址 <input type="text" class="form-control" ng-model="env.newItem.dbAddress" id="dbAddress" name="dbAddress"></label> </div> </div> </div> <div class="row"> <div class="col-xs-offset-1 col-xs-4"> <div class="form-group"> <label>容器版本 <input type="text" class="form-control" ng-model="env.newItem.containerVersion" id="containerVersion" name="containerVersion"></label> </div> </div> <div class=" col-xs-offset-2 col-xs-4"> <div class="form-group"> <label>debug端口号 <input type="text" class="form-control" ng-model="env.newItem.debugPortId" id="debugPortId" name="debugPortId"></label> </div> </div> </div> <div class="row"> <div class="col-xs-offset-1 col-xs-4"> <div class="form-group"> <label>Profile端口号 <input type="text" class="form-control" ng-model="env.newItem.profilePort" id="profilePort" name="profilePort"></label> </div> </div> <div class="col-xs-offset-2 col-xs-4"> <div class="form-group"> <label>run端口号 <input type="text" class="form-control" ng-model="env.newItem.runPort" id="runPort" name="runPort" ></label> </div> </div> </div> <div class="row"> <div class="col-xs-offset-1 col-xs-4"> <div class="form-group"> <label>jvm参数 <input type="text" class="form-control" ng-model="env.newItem.jvmParams" id="jvmParams" name="jvmParams" placeholder="-xms,-xmx,年轻代,持久代"></label> </div> </div> </div> </div> </form>
然后在js代码里将其初始化:
var myApp=angular.module("App",[]); myApp.controller('pannelCtrl',['$scope',"$http",function ($scope,$http) { $scope.env={ newItem:{ environmentName:'',// 环境名 projectKey:'----请选择----',// 所属项目 containerVersion:'',// 容器版本 debugPortId:'', jdkVersion:'', entryAddress:'', dbAddress:'', jvmParams:'', profilePort:'', runPort:'', svnAddress:'' }} }])// ng-module 结束标签
在提交表单的点击事件里添加如下代码:使用ajax请求传输json数据
$.ajax({ url : 'saveEnv', type : "POST", data :$scope.env.newItem, dataType : "JSON", success : function(data) { //do something.... });
-
跟着教程做一个Vue王者荣耀手机端/电脑端官网(二)
2020-05-12 22:26:21.prevent 表示提交以后不刷新页面,阻止表单提交的默认行为,不要用默认提交,用我们给的ajax新方法去提交表单内容。 <template> <div class="about"> <h1>新建分类</h1>视频教程:https://www.bilibili.com/video/BV1A4411Y7fi?p=5
上一次做到category,这次记录一下
@submit.native.prevent
.native 表示对一个组件绑定系统原生事件
.prevent 表示提交以后不刷新页面,阻止表单提交的默认行为,不要用默认提交,用我们给的ajax新方法去提交表单内容。<template> <div class="about"> <h1>新建分类</h1> <el-form-item label-width="120px" @submit.native.prevent="save"> <el-form-item label="名称"> <el-input v-model="model.name"></el-input> </el-form-item> <el-form-item> <el-button type="primary" native-type="submit">保存</el-button> </el-form-item> </div> </template> <script > export default { data(){ return{ model:{} } } } </script>
要使用axios,新建一个http.js引入
npm install vue-axios --save
import aixos from 'axios' const http = axios.create({ baseURL:'http://localhost:3000/admin/api' }) export default http;
导入到main.js入口中,挂载到vue原型上,之后就可以使用$http在任意位置访问接口。
然后就能在组件中直接引用了,目前还没有写后台的提交方法,所以先空着。
报错记录:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Injection “elForm” not found
原因:在使用< el-form-item>标签时,外层没有加< el-form>,导致出现报错
修改后:
界面目前长这样:
-
最适应的vue.js的form提交 涉及多种插件
2018-08-24 16:31:59基于vue.js这里写了一个小列子;涉及到 vue.js动态添加css样式 ,tab切换 ,touch,表单提交,验证,toast...1.先给整个div绑定 v-bind <div class="rz-notice" v-bind:style="{ display: ...基于vue.js这里写了一个小列子;涉及到 vue.js动态添加css样式 ,tab切换 ,touch,表单提交,验证,toast,数据双向绑定等。
先上效果图再一一讲解:
一、首先用到的是动态修改css
点击X将隐藏温馨提示:
1.先给整个div绑定 v-bind
<div class="rz-notice" v-bind:style="{ display: isno}">
<p>名片用来鉴别是相关人员,温馨提示:<img src="../assets/static/img-icon/lan_cha.png" @click="hiddenwords"></p>
</div>注释:图片地址为你自己的地址
<div class="rz-notice" v-bind:style="{ display: isno}"> <p>名片用来鉴别是相关人员,温馨提示: <img src="../assets/static/imgicon/lan_cha.png" @click="hiddenwords"></p> </div>
2.在data里定义
isno:'block',:
3.写click事件方法
methods: { hiddenwords() { this.isno = 'none' }, }
一个简单的点击设置样式为none便写好了。
根据你的业务需求写你动态添加的样式;方法都是一样的。
二、下面写提交时最常见验证
Toast样式 我根据自己的主题色进行了修改
Toast引入import { Toast } from 'vant'
2.1 这里涉及到了v-modal 数据双向绑定
<div class="my-content-list"> <div class="color-black"><span style="margin-right: 0.6rem;"> 真实姓名:</span><input v-model="yoursname" placeholder="请输入您的真实姓名" /></div> </div> <div class="my-content-list"> <div class="color-black"><span style="margin-right: 0.6rem;">手机号码:</span> <input v-model="yoursphone" placeholder="请输入您的手机号码" /></div> </div> <div class="yzbtn" @click="submitBtn">立即认证</div>
2.2在data定义 yoursname和yoursphone的初始值
yoursname: ' ',
yoursphone: ' ',2.3写方法z
submitBtn() { var reg = /^1[3|4|5|8][0-9]\d{4,8}$/; if(this.yoursname == '') { Toast("请填写你的真实姓名"); return; } if(this.yoursphone == '' || this.yoursphone == null) { Toast("请填写你的手机号码"); return; } if(!reg.test(this.yoursphone)) { Toast('手机号码格式不正确'); return; } },
图片上传以及预览图片将在下一篇文章中讲到 每周都会更新一些小列子以及插件方法
最后附上整个代码
欢迎提出你宝贵的意见 一同进步
<template> <div class="renzheng"> <div class="rz-notice" v-bind:style="{ display: isno}"> <p>名片用来鉴别是相关人员,温馨提示:<img src="../assets/static/img-icon/lan_cha.png" @click="hiddenwords"></p> </div> <van-tabs v-model="active" swipeable> <van-tab v-for="(item,index) in navArr" :title="item.name" class="v-tab"> <div v-if="index==0"> <div class="color-black" style="text-align: center;margin-top: 0.4rem;">请上传本人名片照片</div> <div class="rz-picter"> <img src="../assets/jia.jpg" /> <p><input type="file" style="display: none;" >上传图片</p> </div> <div class="cuxian"></div> <!-- 作者:1150801771@qq.com 时间:2018-08-24 描述:form表单 --> <div class="my-content-list"> <div class="color-black"><span style="margin-right: 0.6rem;">真实姓名:</span><input v-model="yoursname" placeholder="请输入您的真实姓名" /></div> </div> <div class="my-content-list"> <div class="color-black"><span style="margin-right: 0.6rem;">手机号码:</span><input v-model="yoursphone" placeholder="请输入您的手机号码" /></div> </div> <div class="yzbtn" @click="submitBtn"> 立即认证 </div> </div> <div v-if="index==1"> <div class="color-black" style="text-align: center;margin-top: 0.4rem;">请上传本人身份证照片</div> <div class="rz-picter"> <img src="../assets/jia.jpg" /> <p>上传人像页</p> </div> <div class="rz-picter"> <img src="../assets/jia.jpg" /> <p>上传国辉页</p> </div> <div class="cuxian"></div> <div class="my-content-list"> <div class="color-black"><span style="margin-right: 0.6rem;">真实姓名:</span><input placeholder="请输入您的真实姓名" /></div> </div> <div class="my-content-list"> <div class="color-black"><span style="margin-right: 0.6rem;">手机号码:</span><input type="number" placeholder="请输入您的手机号码" /></div> </div> <div class="yzbtn"> 立即认证 </div> </div> </van-tab> </van-tabs> </div> </template> <script> import { Tab, Tabs } from 'vant'; import { Toast } from 'vant' export default { name: 'renzheng', data() { return { yoursname: '', yoursphone: '', isno:'block', active: 0, navArr: [{ name: "身份认证" }, { name: "实名认证" } ], } }, methods: { hiddenwords() { this.isno = 'none' }, submitBtn() { var reg = /^1[3|4|5|8][0-9]\d{4,8}$/; if(this.yoursname == '') { Toast("请填写你的真实姓名"); return; } if(this.yoursphone == '' || this.yoursphone == null) { Toast("请填写你的手机号码"); return; } if(!reg.test(this.yoursphone)) { Toast('手机号码格式不正确'); return; } }, } } </script> <style> .rz-notice { padding: 0.2rem 0.3rem; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background: #F0F5FB; color: #28D9EF; } .rz-notice img { height: 0.22rem; width: 0.22rem; } .rz-picter { height: 3rem; width: 6rem; margin: 0.3rem auto; border: 0.01rem solid #ededed; display: flex; flex-direction: column; align-items: center; justify-content: center; } /*立即验证*/ .yzbtn { width: 90%; height: 0.8rem; background: #FF6600; border-radius: 0.06rem; margin: 30px auto; text-align: center; line-height: 0.8rem; color: #FFFFFF } /*修改原有tab样式*/ .van-tab { color: #A3A3A3!important; } .van-tab--active { color: #000!important; } .van-tabs__line { background-color: #FF6600!important; width: 0.7rem!important; text-align: center!important; align-items: center; margin-left: 1.5rem; } .van-toast { background-color: #FF6600; color: #FFFFFF } .my-content-list { padding: 0.3rem; display: flex; flex-direction: row; justify-content: space-between; border-bottom: 0.01rem solid #EDEDED; } </style>
-
form表单 method=“get”时路径 不能通过"?"后加attr=value传值
2017-05-02 10:04:58在实现一个点击div就向后端发送一个请求的功能时,将div的onclick事件绑定事件写在js中,在js中调用一个form的提交(submit)方法。 在设置form.action(路径)时,如果设置form的method-get,不可以通过action中?... -
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020-12-28 17:00:32应用场景: ...这个校验中,最关键的问题在于如何给el-form-item 动态绑定prop。 :prop=”‘tableData.’ + scope.$index + ‘.字段名'” 方法一: <div class=app-container> <el-table-colum -
element-ui +Vue 解决 table 里包含表单验证
2019-04-30 11:04:06应用场景: 在实际使用中经常会遇到需要...这个校验中,最关键的问题在于如何给el-form-item 动态绑定prop。 :prop="'tableData.' + scope.$index + '.字段名'" 方法一: <template> <div class="app-con... -
JS中定时器的使用以及lacation对象的多个案例
2020-03-30 11:45:04注册绑定事件之后,需要URL部分只是 location.href得到的是整个链接 ,将跳转的页面内容赋给div ,使用定时器倒计时实现时间的变化。 手机短信的倒计时 案例分析:获取URL参数数据 数据在不同页面的相互传递 1、第... -
简单的jQuery表单验证失败
2021-01-12 13:33:27刚自学jQuery进行表单验证 就第一个用户名就失败了 按钮提交后直接就跳转了 <code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <... -
ExtAspNet v2.2.1 (2009-4-1) 值得一看
2010-04-01 09:41:27--我们做了优化,现在要使一个Asp.net的按钮能够AJAX提交,你不需要做任何设置(PageManager的属性EnableAjax为true即可,这是默认属性)。 +PageManager的实例方法AddAjaxUpdateControl改名为... -
每一个页面顶部都存在一个搜索输入框,用户通过输入模糊的商品信息,后台数据库通过查询过滤相关的商品信息,并且显示出来给用户查看,显示出来的商品点击之后可以显示商品的详细信息。 2.1.5 发布商品 用户...
-
ExtAspNet_v2.3.2_dll
2010-09-29 14:37:08-修正extjs最新版本(v3.2.2)中的一个bug,如果下拉列表中存在两个相同的Text,则SelectedValue返回值永远是第一个Text的值(feedback:ben.zhou)。 -应用补丁#6593, #6621(feedback:vbelyaev)。 +修正IE7下Grid分页... -
程序天下:JavaScript实例自学手册
2018-07-08 12:59:556.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ... -
最好的asp CMS系统科讯CMSV7.0全功能SQL商业版,KesionCMS V7.0最新商业全能版-免费下载
2013-03-09 22:57:22循环弹出窗口:页面打开时同时弹出一个窗口,在同一窗口内循环显示广告位中的正常广告,这样,每刷新一次就会在弹出窗口中更替显示一个新的广告条 只需后台修改广告即可更新广告;可设置广告过期时间,通用于站内... -
深入浅出Struts2(附源码)
2014-04-09 10:44:433.3 把静态参数传递给一个动作 41 3.4 ActionSupport类 41 3.5 结果 42 3.5.1 Chain 43 3.5.2 Dispatcher 44 3.5.3 FreeMarker 44 3.5.4 HttpHeader 44 3.5.5 Redirect 45 3.5.6 Redirect Action 46 3.5.7 ... -
XHTML.技术内幕(高清PDF中文版)
2011-05-26 15:39:3812.1.3 建立一个表单并添加XHTML 控件 557 12.1.4 从表单中提交数据 562 12.1.5 使用、和 <label> 565 12.1.6 XForms 566 12.2 解决方案 567 12.2.1 ─建立XHTML表单 567 12.2.2 ─建立 按钮 570 12.2.3 ─建立 复选... -
同时 qiankun 是一个开放式微前端架构,支持当前三大前端框架甚至 jq 等其他项目无缝接入。 此项目为了尽可能的简单易上手,以及方便文章讲解,大部分逻辑都在主应用和子应用的 main.js 来回施展, 实际项目应用可...
-
ASP.NET的网页代码模型及生命周期
2009-07-28 14:22:11当创建对象完成,生成创建对象后的代码并生成一个ASPX页面代码,该页面代码反馈给IIS,IIS再反馈成HTML页面的形式给客户端。 4.3 代码隐藏页模型的事件驱动处理 在传统的ASP开发中,ASP的事件都是按照网页的顺序来... -
淘淘商城选择类目子节点不显示的问题(EASYUI异步树) 求大神指点!!!
2018-10-22 15:14:23//ajax的post方式提交表单 //$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串 $.post("/item/save",$("#itemAddForm").serialize(), function(data){ if(data.status == 200){ ... -
史上最全韩顺平传智播客PHP就业班视频,10月份全集
2014-03-26 19:24:55解答学生问题--一个ip绑定多个域名 8-19 2.php运行过程时序图 php书写规范 8-19 3.php基本语法介绍 php数据类型介绍 8-19 4.整型细节说明 8-19 5.布尔细节 浮点数细节 字符串细节 算术运算符① 8-19 6.算术运算符② ... -
传智播客韩顺平php2011年就业培训班400多集
2015-11-17 11:32:36解答学生问题--一个ip绑定多个域名 8-19 2.php运行过程时序图 php书写规范 8-19 3.php基本语法介绍 php数据类型介绍 8-19 4.整型细节说明 8-19 5.布尔细节 浮点数细节 字符串细节 算术运算符① 8-19 6.算术运算符② ... -
(全)传智播客PHP就业班视频完整课程
2015-10-30 13:00:14解答学生问题--一个ip绑定多个域名 8-19 2.php运行过程时序图 php书写规范 8-19 3.php基本语法介绍 php数据类型介绍 8-19 4.整型细节说明 8-19 5.布尔细节 浮点数细节 字符串细节 算术运算符① 8-19 6.算术运算符② ...