DOM - 表单操作

头像
李威振
    阅读 7 分钟

    获取表单

    获取表单元素

    获取表单元素的方式除了Document对象提供的一系列方法外，还有Document对象提供的forms属性。
    该属性获取当前HTML页面所有表单的集合，返回HTMLCollection对象，该对象封装了当前HTML页面所有的表单对象。

    <body>
<form action="" name="myform">
    <input type="text">
    <input type="submit">
</form>
<script>
    //获取当前HTML页面所有表单元素
    console.log(document.forms);
    //通过name属性值：有些老版本浏览器不支持此方法
    console.log(document.myform);
</script>
</body>

    获取表单元素组件

    获取表单元素组件除了使用Document对象提供的定位页面元素的方法外，HTMLFormElement对象的elements属性。该属性获得的是一个表单组件集合。

    <body>
<form action="#">
    <input type="text">
    <input type="submit">
</form>
<form action="">
    <input type="text">
</form>
<script>
    //获取指定的表单元素，+索引值
    var form = document.forms[0];
    //获取指定表单元素的组件 - 是一个集合
    console.log(form.elements);
</script>
</body>

    表单操作

    文本内容选择

    HTMLInputElement对象和HTMLTextAreaElement对象都提供了select()方法，该方法用于选择当前文本框的所有内容。
    获取选择的文本内容

    • selectionStart - 选择文本内容的开始索引值
    • selectionEnd - 选择文本内容的结束索引值
    <body>
<form action="#">
    <input type="text" id="HInputE" value="请输入作者名">
    <input type="submit">
</form>
<script>
    //获取HTMLInputElement对象
    var HIE = document.getElementById('HInputE');
    //选择所有的文本内容
    //获取焦点事件（focus） 失去焦点事件（blur）
    HIE.addEventListener('focus',function () {
        //select() - 全选当前输入框中的所有内容
        //HIE.select();
    })
    
        //选取指定的文本内容
    HIE.addEventListener('select',function () {
        /*
           *HTMLInputElement对象
            *selectionStart - 表示用户开始选择的位置的索引值
            * selectionEnd - 表示用户结束选取的位置的下一个位置的索引值
         */
       console.log(HIE.selectionStart,HIE.selectionEnd);
       //获取HIE的value属性
       var value = HIE.getAttribute('value');
       //substring - 字符串截串
       var result = value.substring(HIE.selectionStart,HIE.selectionEnd);
       console.log(result);
    })
</script>
</body>

    设置部分文本内容

    setSelectionRange()方法 - 用于设置一个获取焦点的文本框中选择指定的文本内容，三个参数

    • selectionStart - 选择文本内容的开始索引值
    • selectionEnd - 选择文本内容的结束索引值
    • selectionDirection - 指明选择的方向，有'forward'、'backward'、'none'3个可选值，分别表示从前先后，从后向前，选择方向未知或不重要。
    <body>
<form action="#">
    <input type="text" id="username" value="请输入你的用户名">
    <input type="submit">
</form>
<script>
    var form = document.forms[0];
    var username = form.elements[0];
    username.addEventListener('focus',function(){
        /*
            setSelectionRange()方法
            * 作用 - 设置选择的文本内容
            * 注意
              * 焦点在文本内容的最后面 - select()方法(全选)
              * 焦点在设置文本内容的范围内有效
         */
        username.setSelectionRange(0,5);
    });
</script>
</body>

    操作剪切板

    事件对象的clipboardData属性得到DataTransfer对象，该对象在IE8之前的浏览器要通过window获取。该对象提供了操作数据的常用方法。

    • setData(in String type,inString) - 为一个给定的类型设置数据
    • getData(inString type) - 根据指定的类型检索数据
    • clearData(in String type) - 删除与给定类型关联的数据
    <body>
<form action="#">
    <input type="text" id="username1" value="花亦花来人亦人">
    <input type="text" id="username2">
</form>
<script>
    var username1 = document.getElementById('username1');
    //绑定复制事件
    username1.addEventListener('copy',function (event) {
        /*
           *得到DataTransfer对象
             * setData()方法 - 设置数据内容
        */
        var data = event.clipboardData || window.clipboardData;
        console.log(data);

        console.log('复制操作');

        var value = username1.value;
        var result = value.substring(username1.selectionStart,username1.selectionEnd);
        console.log(result);

        data.setData('text',result);
    });
    //绑定剪切事件
    username1.addEventListener('cut',function () {
        console.log('剪切操作');
    });
    //绑定粘贴事件
    var username2 = document.getElementById('username2');
    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>

    下拉列表操作

    下拉列表是由<select>和<option>元素创建的，DOM中有对应的对象

    clipboard.png

    clipboard.png

    <body>
<form action="#">
    <select id="city">
        <option id="bj" value="bj">北京</option>
        <option value="nj">南京</option>
        <option value="tj">天津</option>
    </select>
    <select id="city2" multiple size="5">
        <option value="bj">北京</option>
        <option value="nj">南京</option>
        <option value="tj">天津</option>
    </select>
</form>
<script>
    // HTMLSelectElement对象
    var city = document.getElementById('city');
    // 属性
    console.log(city.length);//3
    console.log(city.options);
    console.log(city.selectedIndex);// 被选中<option>的索引值

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

    console.log(city2.item(1));//南京
    city2.remove(2);

    var bj = document.getElementById('bj');
    console.log(bj.index);//0
    console.log(bj.selected);//true
    console.log(bj.text);//北京
    console.log(bj.value);//bj

</script>
</body>

    表单验证

    clipboard.png
    验证表单的方法

    • chenckValidity():如果元素不存在验证问题，返回true，否则返回false
    • setCuetomValidity(message):为元素添加一个自定义的错误，如果设定了自定义错误信息，则该元素被认为是无效的，并显示指定的错误。
    <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>

    submit()方法

    submit()方法用于提交表单，使用该方法允许表单内使用任意一普通按钮即可。

    <body>
<form action="#">
    <input type="text">
    <input type="button" value="提交" id="bnt">
</form>
<script>
    var bnt = document.getElementById('bnt');
    bnt.addEventListener('click',function () {
        var form = document.forms[0];
        form.submit();
    })
</script>
</body>
    dom
    李威振
    16 声望5 粉丝

    别离时方知此世间，花亦花来人亦人

    « 上一篇
    Element对象的基础了解

    引用和评论

    推荐阅读
    头像
    javascript中的动态集合NodeList&HTMLCollection

    aqiongbei阅读 571

    0 条评论
    得票最新