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

最新推荐文章于 2021-05-25 21:20:00 发布

WHUZXQ

最新推荐文章于 2021-05-25 21:20:00 发布

阅读量812

点赞数

CC 4.0 BY-SA版权

分类专栏： Web

本文链接：https://blog.youkuaiyun.com/WHUZXQ/article/details/78521638

Web 专栏收录该内容

72 篇文章

订阅专栏

本文介绍了如何使用JavaScript处理HTML表单的各种操作，包括阻止表单提交、防止重复提交、通过表单事件改变用户界面等。还讨论了如何进行文本框脚本操作，例如选择文本、获取选定文本等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.表单

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