【WEB】表单基础知识实例DEMO

来源：互联网发布：河南省网络教研室编辑：程序博客网时间：2024/06/05 14:41

一.表单

1.阻止表单提交

用处：在表单数据无效不能发送给服务器时，调用该方法。

<body>    <form>        <input type="email" value="email"/>        <input type="pattern" value="pattern"/>        <input type="submit" value="form"/>    </form></body><script>    var form=document.forms[0];    form.addEventListener('submit',function(e){        e?e:window.event;        e.preventDefault();    },false)</script>

注：form.submit()方法也可以提交表单，但不会触发submit事件，因此记得在调用此方法前先验证表单数据。

2.防止重复提交表单

解决重复提交办法有两个，在第一次提交后禁用提交按钮，或者利用onsubmit事件处理程序取消后续的表单提交。

var form=document.forms[0];    form.addEventListener('submit',function(e){        e=e?e:window.event;        var target=e.target?e.target:e.srcElement;        var btn=target.elements["submit-btn"];        btn.disabled=true;    },false)

注：每个表单都有elements属性，该属性时表单中所有表单元素的集合。可按照位置和name访问他们.
不能通过onclick事件处理程序来实现这个功能，原因是不同浏览器之间存在“时差”，有的浏览器会在触发表单的submit事件之前触发click事件，有的浏览器则相反。对于先触发click事件的浏览器，意味着会在提交发生之前急用按钮，结果永远都不会提交表单。

3.通过表单事件改变用户界面

所有的表单字段支持三个事件：blur,change,focus
change事件：用于验证用户在字段中输入的数据。
focus和blur：修改/恢复文本框颜色。

var input=form.elements[0];    input.addEventListener('focus',function(e){        e=e?e:window.event;        var target=e.target?e.target:e.srcElement;        target.style.backgroundColor='yellow';    },false)    input.addEventListener('blur',function(e){        e=e?e:window.event;        var target=e.target?e.target:e.srcElement;        if(/[^\d]/.test(target.value)){            target.style.backgroundColor='red';        }else{            target.style.backgroundColor='';        }    },false)    input.addEventListener('change',function(e){        e=e?e:window.event;        var target=e.target?e.target:e.srcElement;        if(/[^\d]/.test(target.value)){            target.style.backgroundColor='green';        }else{            target.style.backgroundColor='';        }    },false)

注：关于blur和change事件的关系，并没有严格的规定。

二.文本框脚本

注：不建议使用标准的DOM方法修改文本框,使用target.value

1.选择文本

<body>    <form >        <input type="email" value="email" name="email" size="25"/>        <input type="pattern" value="pattern"/>        <textarea rows="25" col="5" name="textbox">initial value</textarea>        <input type="submit"  id="submit-btn" value="form"/>    </form></body><script>    var form=document.forms[0];    var textbox=form.elements["textbox"];    textbox.addEventListener('focus',function(e){        e=e?e:window.event;        var target=e.target?e.target:e.srcElement;        target.select();    },false)</script>

2.取得选择的文本

function getSelectText(textbox){        if(typeof textbox.selectionStart=="number"){            return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);        }    }

3.选择部分文本

form.elements["textbox"].setSelectionRange(0,2)

4.HTML5约束验证API

(1)必填字段

<input type="text" value="email" name="email" size="25" required />

监测浏览器是否支持required

var isRequiredSupported="required" in document.createElement("input")

(2)其他输入类型

<input type="email"/><input type="url"/>

(3)输入模式

<input type="text" pattern="\d+" name="count">

注：以上都不能阻止用户输入无效的文本（书上这么写的，但是实测是可以阻止的）
（4）检测有效性
checkValidity()方法可以检测表单中某个字段是否有效。
属性validity也可以，包含一系列子属性

patternMismatch
valid
valueMissing
typeMismatch

三.选择框脚本

1.选择选项

selectbox.options[1].selected=true

注：单选情况下，将select设置为false对单选框没有影响
selected属性作用主要是确定用户选择了选择框的哪一项，要去的选中的项，可以循环遍历选项集合

function getSelectedOptions(){    var result=[]    var option=null    for(i=0;i<options.length;i++){    option=options[i];    if(option.selected){    result.push(option)}    }    return result;}

2.添加选项

var option=new Option("option text","option value");selectbox.add(option)

3.移除选项

selectbox.remove()//每次只移除第一个选项

*附知识点

共有的表单字段属性：
disabled;form;name;readOnly(只读),tabIndex,type(可写)，value（只读）
共有的表单字段方法：focus()和blur()

HEMLSelectElment属性和方法：
add()
remove()
selectedIndex
options
value
HTMLOptionElement属性和方法
index
selected
text
value

阅读全文

0 0