DOM编程系列之表单操作

表单操作

获取表单元素

Document对象提供一系列获取方法
Document对象提供的forms属性 - 用于获取当前页面中所有表单元素的集合
Document对象提供的<form>元素的name属性值

如果name属性值对应只有一个表单时 - 得到的就是那个<form>元素

-如果name属性值对应具有多个表单时 - 得到的是具有相同的name属性值的表单的集合
示例代码:

<body>
<form action="#">
    <!-- submit - 表示提交按钮 -->
    <input type="submit">
</form>
<form name="myform" action="#">
    <input type="submit">
</form>
<script>
    /*
        获取当前HTML页面中个所有的表单元素
          * 该方法是通过表单特有属性获取HTML页面所有表单
    */
    console.log(document.forms);
    /*
        document.表单名称 - 有些版本浏览器不支持
         * 该方法是通过name属性获取指定表单
    */
    console.log(document.myform);
</script>
</body>

获取表单组件元素

Document对象提供的一系列获取方法
<form>元素在DOM中的对象提供了elements属性 - 得到指定表单中所有组件的集合

通过DOM的Document对象提供的获取方法得到页面中的标签
- 该变量是Node类型的对象
- 该变量是Element类型的对象
- 该变量是HTMLFormElement类型的对象 - 当前获取的是<form>元素
结论:为什么可以同时是三种类型的对象:
- 因为最上层是 Node <- 其次是 Element <- 之后是HTMLElement <- 最后是 HTMLFormElement
<form>方法里面在DOM中就会得到HTMLFormElement对象然后在这个对象里面提供了一个属性叫elements,(对象里就是属性跟方法)elements属性就是HTMLFormElement对象里提供的属性内容.

示例代码:

<body>
<form action="#">
    <!-- submit - 表示提交按钮 -->
    <input type="submit">
</form>
<form name="myform" action="#">
    <input type="submit">
</form>
<script>
    /*
        获取当前HTML页面中个所有的表单元素
          * 该方法是通过表单特有属性获取HTML页面所有表单
    */
    console.log(document.forms);
    /*
        document.表单名称 - 有些版本浏览器不支持
         * 该方法是通过name属性获取指定表单
    */
    console.log(document.myform);
</script>
</body>

文本内容的选择

选择文本内容 HTMLInputElement对象提供了select()方法用来选择当前文本框的所有文本内容

示例代码:

<body>
<form action="#">
    <!-- 输入框 -->
    <input type="text" id="username" value="帅哥你叫啥?">
    <!-- submit - 表示提交按钮 -->
    <input type="submit">
</form>
<script>
    // HTMLInputElement对象
    var username = document.getElementById('username');
    /*
        * 绑定获取焦点(focus)事件
        * 失去焦点(blur)事件
      */
    username.addEventListener('focus',function () {
        // select()方法 - 选择当前输入框中的所有文本内容(就是全选)
        username.select();
    });
    /*
        select事件
          * 只要选择对应元素的文本内容是被触发
            * select()方法
     */
    username.addEventListener('select',function () {
        /*
            HTMLInputElement对象
              * selectionStart - 表示用户选中文文本内容的开始索引值
              * selectionEnd - 表示用户选中文文本内容的结束索引值的下一个值
         */
    console.log(username.selectionStart,username.selectionEnd);
    var value = username.getAttribute('value');
    // 获取用户选取的内容和对应的索引值
    var result = value.substring(username.selectionStart,username.selectionEnd);
    console.log(result);
    });
</script>
</body>

设置文本内容

setSelectionRange()方法
- 作用 - 设置选择的文本内容
注意:
- 焦点在文本内容的最后面 - select()方法(就是全选的意思)
- 焦点在设置文本内容的范围内有效

示例代码:

<body>
<form action="#">
    <!-- 输入框 -->
    <input type="text" id="username" value="写点啥吧...">
    <!-- 提交按钮 -->
    <input type="submit">
</form>
<script>
    // 通过数组的索引值获取HTML页面中指定的form表单
    var form = document.forms[0];
    // 通过索引值获取指定的form元素
    var username = form.elements[0];
    username.addEventListener('focus',function () {
        /*
            setSelectionRange()方法
              * 作用 - 设置选择的文本内容
              * 注意:
                * 焦点在文本内容的最后面 - select()方法(就是全选的意思)
                * 焦点在设置文本内容的范围内有效
         */
        username.setSelectionRange(0,3);
    })
</script>
</body>

操作剪切板

剪切板主要是复制,粘贴和剪切

示例代码:

<body>
<form action="#">
    <!-- 输入框 -->
    <input type="text" id="username" value="随便写点啥吧...">
    <!-- 输入框 -->
    <input type="text" id="username2">
    <!-- 提交按钮 -->
    <input type="submit">
</form>
<script>
    // var result;// 全局作用域

    // 通过ID属性查找指定元素节点
    var username = document.getElementById('username');
    // 为指定元素绑定 'copy'(复制的意思)事件
    username.addEventListener('copy',function (event) {
        /*
            得到DataTransfer对象
              * setData()方法 - 设置数据内容
         */
        // 解决浏览器兼容问题
        var data = event.clipboardData || window.clipboardData;
        console.log(data);
        console.log('现在是复制操作...');

        var value = username.value;
        // 获取用户操作时从开始到结束的索引值对应的内容
        var result = value.substring(username.selectionStart,username.selectionEnd);
        console.log(result);
        // 相当于键盘上的 Ctrl + C 的效果
        data.setData('text',result);
    });
    // 为指定元素绑定 'cut'(就是剪切的意思)事件
    username.addEventListener('cut',function () {
        console.log('现在是剪切操作...');

    });

    // 通过ID属性获取指定元素节点
    var username2 = document.getElementById('username2');
    // 为指定元素绑定 'paste'(粘贴的意思)事件
    username2.addEventListener('paste',function (event) {
        // 阻止默认事件
        event.preventDefault();
        /*
            得到DataTransfer对象
              * getData()方法 - 获取数据内容
         */
        var data = event.clipboardData || window.clipboardData;
        var result = data.getData('text');
        console.log(result);

        if (result ==='写点啥吧') {
            result = '啦啦啦';
        }
        username2.value = result;
    });
</script>
</body>

下拉列表操作

示例代码:

<body>
<form action="#">
    <select id="city">
        <option id="jms" value="jms">佳木斯</option>
        <option value="heb">哈尔滨</option>
        <option value="hlj">黑龙江</option>
    </select>
    <select id="city2" multiple size="3">
        <option value="jms">佳木斯</option>
        <option value="heb">哈尔滨</option>
        <option value="hlj">黑龙江</option>
    </select>
</form>
<script>
    //HTMLSelectElement对象
    var city = document.getElementById('city');
    //
    console.log(city.length);// 调用结果为 3 - 表示列表项目的个数
    console.log(city.options);// 调用结果为 HTMLOptionsCollection(3) - 表示所有列表项目的类数组集合
    console.log(city.selectedIndex);// 调用结果为 0 - 表示选中项的索引值

    var city2 = document.getElementById('city2');
    // size属性默认值为 0
    console.log(city2.size);

    // 通过索引值找到指定的项目
    console.log(city2.item(1));
    // 通过索引值删除指定的项目
    city2.remove(2);

    var jms = document.getElementById('jms');
    console.log(jms.index);// 调用结果为 0 - 表示当前元素在其属性的选项列表中的索引值
    console.log(jms.selected);// 调用结果为 true - 表示当前元素是否被选中
    console.log(jms.text);// 调用结果为 佳木斯 - 表示当前元素的文本内容
    console.log(jms.value);// 调用结果为 jms - 表示当前元素的value属性值
</script>
</body>

HTML5表单验证

注意: HTML5提供了一些表单验证的属性和方法,但是有浏览器兼容问题

示例代码:

<body>
<form action="#">
    <!--
        HTML表单组件元素的验证属性
        * required - 验证当前元素不能为空
        * pattern - 验证当前元素输入的内容是否与指定的正则表达式匹配
     -->
    <input type="text" id="username" required pattern="^[0-9a-zA-Z]{6,12}$">
    <input type="submit">
</form>
<script>
    var username = document.getElementById('username');
    /*
        表单组件元素对应的对象提供了validity属性
        * 得到ValidityState对象 - 提供了一系列的验证属性
     */
    console.log(username.validity);

    // console.log(username.validity.valueMissing);

    username.addEventListener('blur',function(){
        /*
            valueMissing属性
            * 作用 - 配合元素中required属性来使用
            * 结果
              * true - 表示当前元素内容为空(错误的)
              * false - 表示当前元素内容不为空(正确的)
         */
        if (username.validity.valueMissing) {
            /*
                setCustomValidity(message)方法
                * 作用 - 替换浏览器默认的错误提示信息
                * 注意 - 如果输入正确，必须将错误提示信息设置为空
             */
            username.setCustomValidity('用户名不能为空');
        } else {
            username.setCustomValidity('');
        }
        /*
            patternMismatch属性
            * 作用 - 配合元素中pattern属性来使用
         */
        if (username.validity.patternMismatch) {
            username.setCustomValidity('用户名格式错误');
        } else {
            username.setCustomValidity('');
        }
        /*
            * rangeOverflow - 配合元素中max属性来使用
            * rangeUnderflow - 配合元素中min属性来使用
            * stepMismatch - 配合元素中step属性来使用
            * tooLong - 配合元素中maxLength属性来使用
            * tooShort - 配合元素中minLength属性来使用
            * typeMismatch - 配合<input type="url">等元素来使用
            * customError - 配合setCustomValidity()方法来使用
            * valid - 验证当前元素是否验证通过
              * true - 表示当前元素验证通过
              * false - 表示当前元素验证通过
         */
    });

</script>
</body>

表单验证

示例代码:

<body>
<form action="#">
    <input type="text" id="username">
    <input type="submit">
</form>
<script>
    var username = document.getElementById('username');
    username.addEventListener('blur',function(){
        // 1.获取当前元素的value属性值
        var value = username.value;
        // 2.根据获取的值进行判断
        if (value === '' || value === undefined || value === null) {
            console.log('请输入你的用户名');
        }
    });

</script>
</body>

表单提交

submit事件

表单提交就是DOM中给了两样东西

是submit事件在表单提交时会触发
是在<form>元素对应的DOM对象里面提供了submit()方法可以用于提交表单.

好处就是去掉表单本身的提交机制通过submit方法的方式进行提交(灵活性比较大想怎么用都可以)

示例代码:

<body>
<form action="#">
    <input type="text" id="username">
    <input type="submit">
</form>
<script>
    /* 通过索引值获取到指定的元素 */
    var form = document.forms[0];
    /* 为获取到的元素绑定 'submit'(按钮的意思) 事件 */
    form.addEventListener('submit',function(event){
        console.log('当前表单已被提交...');
        // 阻止默认事件
        event.preventDefault();
    });

</script>
</body>

submit()方法

示例代码:

<body>
<form action="#">
    <input type="text" id="username">
    <input id="btn" type="button" value="提交">
</form>
<script>
    /* 通过ID属性获取指定元素节点 */
    var btn = document.getElementById('btn');
    /* 为获取到的元素节点绑定 'click'(点击的意思)事件 */
    btn.addEventListener('click',function(){
        var form = document.forms[0];
        form.submit();// 提交表单
    });

</script>
</body>

DOM编程系列之表单操作

表单操作

获取表单元素

获取表单组件元素

文本内容的选择

设置文本内容

操作剪切板

下拉列表操作

HTML5表单验证

表单验证

表单提交

submit事件

submit()方法

a达达

引用和评论

Ajax系列之JSON数据格式