FormElement
target 用于发送和接收响应的窗口名称
length 用于表示表单控件的数量
Form标签的target属性-----无刷新表单提交
document.forms获取页面中所有的form元素，可以通过数值索引或name值取得，但是不建议使用name去获得特定的表单，一是容易出错，而是将来的浏览器可能会不支持。也就是所谓的向后兼容。
elements属性，该属性是表单中所有表单元素的集合。是一个有序列表，可以通过数值索引或name取得。当几个元素使用同一个name，通过name获取到一个NodeList。
点击即可提交表单的三种元素
• input type=submit
• button type=submit
• input type=image
• 只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交该表单
• 以这种方式提交表单时，浏览器会在讲请求发送给服务器前出发submit事件。阻止这个事件的默认行为就可以取消表单提交。在这之前我们可以验证表单数据，来决定是否允许表单提交。
重复提交表单问题
• 第一次提交后禁用表单按钮
• 利用onsubmit事件处理程序取消后续的表单提交操作
表单字段
属性
• form 指向当前字段所属表单的指针
• type 当前字段的类型 可以动态修改该字段 改变input的类型
• value 当前字段将被提交给服务器的值
方法
• focus（） 聚焦于该元素 但是当元素hidden或者不可见时会发生错误
• H5中有autofocus属性 布尔值
• 将其他元素的tabIndex属性设置为-1，然后再调用focus（）方法。只有opera不支持。
• change 对于input和textarea元素在它们失去焦点并且value值改变时触发。select在其选项改变时触发
EventUtil
• change事件和blur事件触发的顺序不一定
文本框
i. size指定文本框能够显示的字符数
ii. 处理文本框的值不要用DOM方法，因为对value的修改不一定会反映在DOM中
iii. 选择文本。。。
iv. 过滤输入。。。
v. 自动切换。。。
H5的约束验证
FormData对象
是一个不透明的对象，现在暂时只有一个append可以操作，不能通过序列化手段得到其里面的内容，用法现在也只有一个，用于增强型的XMLHttpRequest对象的send方法中
表单提交
一般表单的提交用的都是用button然后用ajax来提交，但是用button就不能触发HTML5的自带表单验证，用submit的话就又会直接提交表单。
解决方法：用submit来提交表单，然后在js中监听submit方法，用ajax提交表单最后阻止submit的自动提交。
$("#submitform").on("submit",function(ev){ $.ajax({ });//阻止submit表单提交 ev.preventDefault();//或者return false //return false; }); $("form").submit(function(){//这里是要执行的代码event.preventDefault(); });
检测input的输入值
检测输入值的合法性
检测是否有值
functiontestVal(obj){for(vari=0;i
检测多选框是否至少选中一个值
functiontestCheckRio(iptName){varchks=$(".checkbox-row input[type=checkbox][name="+iptName+"]");varnumber=0; $.each(chks,function(index){if(chks[index].checked==true){ number++; } })if(number<=0){returnfalse; }else{returntrue; } }
当input类型为Number时 输入其他类型数据没有value，maxlength没有作用，需要用slice方法
5) value=value.slice(0,5)"/>
date的样式和功能设置
改变默认样式
http://www.zhangxinxu.com/study/201306/pseudo-elements-to-style-type-date.html
移动端date的placeholder会显示一片空白，初始效果也没有，通过value值可以设置，但是必须是标准的日期格式
解决方法
i. 用伪类去为input模拟一个placeholder，这样只是设置了placeholder，当选择了日期之后，placeholder还是存在
input[type="date"]:before{content:attr(placeholder);color:red; }
ii. JS配合使用
functionpickTime(iptName){varo =document.getElementById(iptName); o.onfocus =function(){this.removeAttribute('placeholder'); }; o.onblur =function(){if(this.value =='')this.setAttribute('placeholder','请输入日期'); }; }
iii. 非date类型的input设置placeholder颜色的css
::-webkit-input-placeholder{color:red;}
file自定义样式
隐藏input，将它的点击事件绑定在其他元素上
还可以同步将选择到的文件的文件名显示到页面上
$('input[id=introfile]').change(function(){varfile = $(this).val();varfileName = getFileName(file);functiongetFileName(o){varpos = o.lastIndexOf("\\");returno.substring(pos +1); } $('#introfileName').text(fileName);});
网友评论