form 表单处理

submit相关

当使用 submit 按钮或者 image  或者button type="submit"   来提交表单时,会触发 submit 事件,但是直接javascript调用submit() 提交的话, 不会触发submit()

而使用javascript调用 reset() 的话则会继续触发 reset() 事件

点击submit时,有些浏览器先触发click事件,有些浏览器先触发submit事件,因此不能依赖

防止重复提交表单

1、<input type=”button” value=”Submit”  onclick=”this.disabled=true; this.form.submit()” />

不使用 submit 按钮因为它会在提交之前就被禁止,所以表单不会被提交

2、另外一种方法是监听onsubmit事件,发现重复提交请求就取消掉

访问表单字段

表单里面的控件元素同时属于表单集合,属于表单的属性,可以使用索引和name来访问:

var form = document.getElementById(“form1”);
var field1 = form.elements[0];                           //获得表单里的第一个元素
var field2 = form.elements[”textbox1”];                     //获得name为textbox的元素,如果多个元素name一致,那么将返回HTMLcollection集合

注:form[0]和form["name"]是为了兼容旧的浏览器,如果可以应该使用form.element[0]的形式

输入框

输入框(text或者textarea)当里面的文字在获取焦点以后发生了变化,当失去焦点以后会触发change事件(因此可以拿来验证用户的输入是否正确),如果同时指定了 blur()  和  change()  , 哪个先触发因浏览器而会不同。同时修改输入框值的时候直接使用element.value更好,而不推荐使用setAttribute()

输入框有一个select方法,可以用来选中里面的文字,同时也提供了select事件,但是无法知道哪些内容被选中,HTML5提供了两个属性selectionEnd,selectionStart,可以获取选择开始和结束的位置,再配合切割就可以获取啦,对于旧的ie浏览器可以使用document.selection(包含了文档中所有被选中的值)来模拟:

function getSelectedText(textbox) {

if (typeof textbox.selectionStart == “number”) {

return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);

} else if (document.selection) {

return document.selection.createRange().text;

}

}

同时HTML5也提供了一个部分文字选择的方法:setSelectionRange

textbox.value = “Hello world!”

textbox.setSelectionRange(0, 3);       //”Hel”

keypress 事件只有当代表字符的按键按下时才会触发,禁用默认行为就能阻止输入任何字符,但是有些浏览器按上下左右之类的也会触发,还好在火狐所有触发keypress的非字符按键字符为0,Safari 3 以前的则返回字符8,所以不要阻止10一下的:

textbox.addEventListener( “keypress”, function(event){

var target = event.target;

var charCode = EventUtil.getCharCode(event);

if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9){                   //String.fromCharCode 将ascii码转成字符串

EventUtil.preventDefault(event);

}

});

onkeydown 只要键盘按键被按下就会触发

an empty string is always considered to be present in any string

当一个表单控件获得焦点的时候,按下enter按钮,就会提交表单。如果没有submit按钮的话,则不会提交。还有一个例外的就是textarea,它会换行咯

可以为text输入框指定pattern属性,该属性接收正则表达式,只有匹配的内容才能输入,^代表开头,$代表结尾

var pattern = document.forms[0].elements[“count”].pattern;

change事件,在不同的表单控件上触发的时间也有差异,对于input和textarea,当他们失去焦点并且里面的值有变化就会触发。对于select元素,只要改变了选项就会触发,不用等到失去焦点。

使用checkValidity()可以用来检测输入框输入的数据是否符合预定条件,也可以用在表单上form.checkValidity(),如果每个输入框都符合条件才返回true。检测出错误以后可以使用validity对象定位错误类型,该对象有很多错误类型属性,例如required没有填写数据的话↓

badInput: false

customError: false

patternMismatch: false

rangeOverflow: false

rangeUnderflow: false

stepMismatch: false

tooLong: false

typeMismatch: false

valid: false

valueMissing: true

 

但是可以设置关闭检测直接<form novalidate>,这样的话会忽略对该表格内输入内容的检测,也可以用document.forms[0].noValidate = true;设置。可以在submit按钮上设置<input type=”submit” formnovalidate name=”btnNoValidate” value=”Non-validating Submit”>那么按这个按钮提交就不会检测了。

通常只有表单元素才可以设置focus,但是可以通过把元素的tabIndex设为-1来让任意元素都可以focus

textbox有一个select()方法,用来选中里面的文字,同时也提供了select事件,当textbox里面的文字被选中时触发

<input> 和 <button>可以动态改变type属性,但 <select> 的type属性是只读的

在隐藏的表单元素上调用focus方法会报错,不管是hidden类型还是用css隐藏的。

function serialize(form) {

var parts = [],

field = null,

i,

len,

j,

optLen,

option,

optValue;

for (i=0, len=form.elements.length; i < len; i++){

field = form.elements[i];

switch(field.type){

case ”select-one”:

case ”select-multiple”:

if (field.name.length){

for (j=0, optLen = field.options.length; j < optLen; j++){

option = field.options[j];

if (option.selected){

optValue = ””;

if (option.hasAttribute){

optValue = (option.hasAttribute(”value”) ?

option.value : option.text);

} else {

optValue = (option.attributes[”value”].specified ?

option.value : option.text);

}

parts.push(encodeURIComponent(field.name) + ”=” +

encodeURIComponent(optValue));

}

}

}

break;

case undefined: //fieldset

case ”file”: //file input

case ”submit”: //submit button

case ”reset”: //reset button

case ”button”: //custom button

break;

case ”radio”: //radio button

case ”checkbox”: //checkbox

if (!field.checked){

break;

}

/* falls through */

default:

//don’t include form fields without names

if (field.name.length){

parts.push(encodeURIComponent(field.name) + ”=” +

encodeURIComponent(field.value));

}

}

}

return parts.join(”&”);

}

时间: 2024-10-14 10:58:33

form 表单处理的相关文章

form表单那点事儿(上) 基础篇

做为html中最为常见,应用最广泛的标签之一,form常伴随前端左右.了解更深,用的更顺. 目录: 表单属性 表单元素 常识 模拟外观 表单属性 这个表单展示了form表单常用的属性 属性名 属性值 描述 action 一个url地址 指定表单提交到的地址 method `GET` , `POST` 表单将以此种方法提交到服务器 target `_self` 当前页面 `_blank` 每次在新窗口打开 `blank` 每次在同一个新窗口打开 `_parent` 父级frame `_top` 顶

Form表单Ajax系列化提交数据

页面上有一个商品的颜色尺码二维输入框,输入完毕之后需要把数据进行提交,点击立即购买则进行页面的跳转,通过form表单将数据提交到后台,而点击添加到购物车的话,则会通过ajax进行数据的提交,页面不进行跳转.前台样式: 下面是form表单: <form id="cartForm" action="${ctx}/cart/save" method="post"> <div class="product-page-optio

通过button将form表单的数据提交到action层

form表单中不需要写action的路径,需要给form表单一个唯一的id,将你要提交的信息的表单中的标签name="action中的javabean对象.javabean属性".给button按钮添加一个onclick()点击事件,并实现该点击事件,在该onclick()方法中通过ajax将form表单中的数据提交给action层 JSP页面中的代码: 1 <form id="handleform"> 2 <!-- 根据学生id修改学生信息 --

HTML table、form表单标签的介绍

本篇主要介绍 table.form标签以及表单提交方式. 目录 1. <table> 标签:在HTML 中定义表格布局. 2. <form> 标签:用于创建 HTML 表单. 3. 表单提交方式:介绍get.post方法. 1. <table> 标签 1.1 说明 在HTML 中定义表格布局. 1.2格式 <table> <caption></caption> <tr> <th></th></

serialize可以获取form表单里面的数值

serialize属性 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="../jquery-1.12.2.js"></script> 7 </head> 8 <

微信小程序组件解读和分析:九、form表单

form表单组件说明: 表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交. 当点击 <form/> 表单中 formType 为 submit 的<button/> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key. form表单组件用法: 重置:<butt

ajax传递数组、form表单提交对象数组

在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发任务中,遇到了需要批量传递对象,也就是需要传递对象数组,在此做个总结.今天又遇到需要向后台传递数组,便一并写下来吧. 1.ajax传递普通数组 前台代码 var deleteNum= [];//定义要传递的数组 deleteNum.push("1"); deleteNum.push(&qu

form表单提交的两种方式 button和submit的使用方法

1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的头部插入一个js方法: function checkUser(){   var result = document.getElementById("userid").value;   var password = document.getElementById("userpass

按Enter键后Form表单自动提交的问题

怪事年年有,今年特别多. 话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得. 接下来就是一番苦逼的烧脑和蛋疼~ 一.被表象所迷惑 突然出现这种情况,脑海中第一反应是,keydown事件是不是出问题了,然后找啊找啊找啊,然后没有然后. 在把input元素上的所有事件移除掉后,我自信的按了一下enter键.艾玛,又刷新了.心里那个苦哎. 二.列出所有可能 一阵捣鼓之后,脑海中列出了所有按下enter键后的改变,url改变,多了一个问号

HTML5的form表单属性

form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为form表单的id属性值即可,表单form与从属元素的从属关系依然有效, like this: <form id="log"> <input type="submit"> </form> <input type="sub