form表单提交

ASP.NET 多个提交按钮页面,ENTER指定执行某一按钮

心已入冬 提交于 2020-01-30 04:34:35
在WEB页面上,通常SUBMIT类型的按钮会被默认指派为所在FORM表单的提交按钮 我们在做ASP.net WEB应用的时候,常常遇到会在同一个页面里添加多个按钮,而每个按钮肯定都会触发页面回送事件。 在ASP.NET中,只能指定一个带有RUNAT=SERVER的FORM表单,因此,这个表单会指派哪个按钮为默认提交按钮呢? 不做任何处理的情况下是很难控制的,例如在同一个页面里做了N个搜索框,设计上理想的思路是在某一输入框输入关键字后,用户按ENTER键,执行当前输入的输入框对应的提交按钮,但是,实际上往往事与愿违。无论怎么提交,总是会只执行某一个按钮事件。 网上很多方法都是使用JAVASCRIPT来进行判断,在输入框中加入KEYPRESS之类的事件,然后检查eventCode,如果是回车键,那么就指定执行某一个按钮。 这个方法不是不行,但是,并不好维护,而且在处理复杂的逻辑时,往往不好控制。 其实,ASP.NET给出了很好的解决方案,只是通常不被人注意。 首先,屏蔽浏览器提交模式,也就是说,FORM不再默认指定一个ENTER提交的按钮 方法是将BUTTON的UseSubmitBehavior设置为false,这样这个按钮就不会接受回车提交,这样就不会出现用户焦点在页面某处聚焦时按回车提交的情况。 为什么会这样呢?查看页面源文件我们会发现本来ASP

HTML表单控件

北城以北 提交于 2020-01-27 08:52:26
input元素无疑是一个庞大和复杂的元素,但它并不是唯一的表单控件。还有button、select、option、label、optgroup、textarea、fieldset、legend这八个传统表单控件,datalist、progress、meter、output、keygen这五个新增表单控件 传统控件 button  定义一个按钮 select   定义一个下拉列表 option  定义下拉列表中的一个选项 optgroup  定义选项组,用于组合选项 textarea  定义多行的文本输入控件 fieldset  分组表单内的相关元素 legend  定义fieldset元素的标题 label   定义input元素的标注 button button元素用来定义一个按钮,button元素内部可以放置文本或图像或其他多媒体内容。但唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为 始终为button元素设置type属性,IE7-浏览器的默认类型是button,而其他浏览器的默认类型是submit IE7-提交button元素之间的文本,而其他浏览器则会提交value属性的内容 <button> 元素比 <input> 元素更易样式化。可以添加内联HTML内容(如 <em> , <strong> 甚至 <img> ),并使用:after和

django项目表单校验

安稳与你 提交于 2020-01-26 21:09:56
django项目表单校验 校验通常使用用来对用户输入和输入规范的比较。form表单提供给开发者和使用者更好的交互体验。但是往往用户提交的内容并不让人满意,所以需要校验来限制form表单提交内容的格式和内容。基于实现的原理,我们把校验分为: 前端校验:写在html上,用来对前端input进行校验,编写简单,直观。但是如果有一定技术的用户绕过页面进行提交,就容易发生问题。 后端校验:写在视图函数保存数据的部分,在保存数据到数据库或者对数据进行判断之前,进行校验,这样校验,比较复杂,但是安全程度高,大部分前后端校验都有。 前端校验 form表单校验onsubmit的值是true还是false js当中定义对应的函数进行判断 后端校验 django为开发者提供了完整的后端校验模块,这个模块叫forms类。 form表单定义步骤: 创建forms文件(在app下) 编写form类 在视图当中调用form类 在前端使用form类 注意 : form表单提供了html代码,但是需要保证html的灵活性 form表单类不会生成form标签获取其他父级标签(ul,table), 同样不会生成提交按钮,所以在使用form类生成html的时候需要如下写 form表单字段属性 widget error_messages 校验的流程: 1、创建表单实例 2、将请求数据出入表单实例 3、发起校验 4

Vue--登录页面逻辑

烂漫一生 提交于 2020-01-26 12:26:00
添加Mock数据 前面我们使用elementUI实现了登录页面和简单的校验,现在使用接口的方式来实现登录的逻辑 使用EasyMock添加两个接口 因为要访问EasyMock 模拟接口, 所以要把 接口地址改一下,在 .env.development 文件中修改如下: 注意:改成你自已的EasyMock上的接口服务地址 # 使用 VUE_APP_ 开头的变量会被 webpack 自动加载,process.env.VUE_APP_xxx # 开发环境的前缀 VUE_APP_BASE_API = '/dev-api' # 目标服务接口地址,是按照自己的环境来的,添加或更改服务后,需要重启服务 VUE_APP_SERVICE_URL = ' http://mengxuegu.com:7300/mock/5db437d92aa750460d4fce18' 改完后,重启下 npm run serve , 看下是否正常 当登录成功后,响应状态码 2000 和 token 值。token用来 认证 后面请求只要是成功的,状态码均为 2000, 这个是与后台接口的约定 请求URL: /user/login 请求方式: post 描述:登陆认证 mock.js 配置如下 { "code":2000, "flag":true, "message":"验证成功", "data":{ "token":

Android模拟 HTTP multipart/form-data 请求协议信息实现图片上传

对着背影说爱祢 提交于 2020-01-26 01:49:01
问题: Android应用中,当遇到填写用户信息、发表评论等操作,不可避免会遇到“form表单操作”(类似web form操作)上传图片的功能。 在这种情况下,使用Android的HTTPConnection/ ApacheHTTP 通过POST 和GET的方式就实现不了。 解决方法: Android客户端通过模拟 HTTP multipart/form-data 请求协议信息实现图片上传。 /** * 文件名称:UploadImage.java * * 版权信息:Apache License, Version 2.0 * * 功能描述:实现图片文件上传。 * * 创建日期:2011-5-10 * * 作者:Bert Lee */ /* * 修改历史: */ public class UploadImage { String multipart_form_data = "multipart/form-data"; String twoHyphens = "--"; String boundary = "****************fD4fH3gL0hK7aI6"; // 数据分隔符 String lineEnd = System.getProperty("line.separator"); // The value is "\r\n" in Windows. /* *

django Form组件 上传文件

故事扮演 提交于 2020-01-24 04:02:24
上传文件   注意:FORM表单提交文件要有一个参数 enctype="multipart/form-data" 普通上传: urls: url(r'^f1/',views.f1), url(r'^f2/',views.f2), views:  def f1(request): if request.method == "GET": return render(request,'f1.html') else: import os #导入os模块 #request.get / post /FILES方式.get()取值 去文件name=fafafa的值 file_obj=request.FILES.get("fafafa") #拿到一个文件对象 f=open(os.path.join('static',file_obj.name),'wb') #将文件名加入到static目录下 for chunk in file_obj.chunks(): #chunk块 文件的大小,循环file_obj文件对象.chunks f.write(chunk)#写到文件里面去 f.close() # return HttpResponse(".....") return render(request,'f1.html') html:   <!DOCTYPE html> <html lang="en">

bootstrapValidator表单验证插件

拥有回忆 提交于 2020-01-23 14:00:16
bootstrapValidator——一个很好用的表单验证插件,再也不用手写验证规则啦! bootstrapValidator官方文档: http://bootstrapvalidator.votintsev.ru/api/ 一、举个丽子: 写了一个小例子 先来看一下效果吧! 预览效果 查看源码 二、具体实现步骤如下: 1、下载jquery、bootstrap、bootstrapValidator bootstrapValidator下载地址: https://github.com/nghuuphuoc/bootstrapvalidator/commit/c023475236f66baab72975887a26e51d65df72f7 在这里下载后,解压bootstrapValidator-master,里面会有jquery、bootstrap、bootstrapValidator。其中bootstrap和jquery在vendor文件夹中,bootstrapValidator在src文件夹中。直接复制过来用就可以了,不用单独一个一个下载。在demo文件夹中有很多例子,可以直接拿过来用。 注意:如果bootstrap或jquery是单独下载的,可能会因为版本不一致,导致验证时,不会实时更新状态,最好使用下载后bootstrapValidator

html - 表单

不羁的心 提交于 2020-01-22 13:19:37
html - 表单 一、input 二、textarea(多行文本框) 三、select option(下拉菜单) 四、lable (辅助) 一、input 常见的input类型: text 单行文本框 password 密码 radio name属性一般和radio一起使用,表示一组的单选框name值相同 checkbox 后面再+checkbox表示默认选项、再+disabled表示禁止选线 file 后+multipluy 表示多选,表示可同时上传多份文件 submit 提交到form的action属性内容表示的地址中区 reset 初始化form表单 < body > < form action = "http:www.baidu.com" > 输入框: < input type = "text" placeholder = "请输入" > < br > placeholder表示提示文字 密码框: < input type = "password" > < br > 单选框: < input type = "radio" name = "gender" > 男 < input type = "radio" name = "gender" > 女 < br > 注意:name值相等的确定为一组单选组 复选框: < input type = "checkbox"

js 表单操作form

大憨熊 提交于 2020-01-22 07:38:50
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="application/javascript"> /** * 一、表单的获取方式 * 1.document.getElementById() * 2.document.forms[index]; * 3.document.forms[form_name] * 4.document.form_name */ function testGetForm() { var frm = document.getElementById("regForm"); // 常用 console.log(frm); frm = document.forms[0]; console.log(frm); frm = document.forms["aaform"]; console.log(frm); frm = document.aaform; // 常用,仅表单可以通过name属性获取 console.log(frm); } //二、表单对象的属性 function testFormField() { var frm = document.aaform; console.log(frm.id); console.log

【layui】提交表单

笑着哭i 提交于 2020-01-21 15:15:11
1 <script type="text/javascript"> layui.use(['form', 'layer', 'jquery'], function () { var form = layui.form, layer = parent.layer === undefined ? layui.layer : top.layer $ = layui.jquery; //登录按钮 form.on("submit(login)", function (data) { $(this).text("登录中...").attr("disabled", "disabled").addClass("layui-disabled"); setTimeout(function () { $("#loginFrm").submit(); }, 1000); return false; }) //表单输入效果 $(".loginBody .input-item").click(function (e) { e.stopPropagation(); $(this).addClass("layui-input-focus").find(".layui-input").focus(); }) $(".loginBody .layui-form-item .layui-input").focus