Javascript表单编程

最新推荐文章于 2023-02-03 10:00:00 发布

想被带飞的鱼

最新推荐文章于 2023-02-03 10:00:00 发布

阅读量1.4k

点赞数 1

分类专栏： Javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_62008199/article/details/123330944

版权

Javascript 专栏收录该内容

60 篇文章 2 订阅

订阅专栏

本文详细介绍了JavaScript中如何获取和操作表单元素，包括通过ID、forms属性和name属性等方法。同时讲解了表单域的获取以及表单字段的value属性，还涉及到了表单的提交、重置事件以及焦点、change、input、select和search事件。此外，文章还讨论了下拉列表和多选列表的操作，如添加、删除选项，获取选中值等。最后提到了表单验证的基本方法，如长度验证和正则表达式验证。

摘要由CSDN通过智能技术生成

Javascript表单编程

一：获取表单元素

<body>
    <form action="#" id="forml" name="forml">
        <div>
            <label for="usernaem">
            账户：<input type="text" name="username" id="username">
        </div>
        <div>
            <label for="userpwd">
            密码：<input type="password" name="password" id="password">
        </div>
        <div>
            <input type="submit" value="提交" id="tijiao">
        </div>
        <div>
            <label for="">性别</label>
        </div>
    </form>
</body>
<script>
        //获取表单元素
        let fn = document.getElementById("forms");
        //通过forms属性的下标来获取
        let fn = document.forms[0];
        //通过forms的属性来获取form表单的id
        let fn = document.forms['forml'];
        //直接点name获取
        let fn = document.forml;
        console.log(fn);
</script>

二：获取表单域

1.表单域

概念：存放表单的区域。把表单控件里面的信息全部收集提交（所有表单元素都有value值）

			|	input-type(输入框)   
表单域		  |	  select-option(下拉框)
			|	textarea(多行文本框)

2.获取表单域

 //获取表单域
 //elements：用于获取所有表单元素，下标是获取的第一个表单元素，
 console.log(fn.elements[0]);
 //通过元素的name和id来获取这个表单元素
 console.log(fn.elements['username']);
 //直接使用元素的name和id获取
 console.log(fn.password);
 // 直接使用元素的name和id获取
 console.log(fn['password']);
 //通过下标获取
 console.log(fn[1]);

三：获取表单字段

1.value

//获取表单字段值
let getBtn = document.getElementById("getBtn");
getBtn.onclick = function () {
	console.log("密码的值" + fn.password.value);
}

2.特殊属性

概念：是指只需要写属性名，不需要写属性值的属性，通过js来操作时用true和false来判断是否起作用

checked：用于单选和复选框
selected：用于下拉列表
multiple：使下拉列表可以进行多选
read-only ：只读（提交的时候值能提交给后台，只能用于输入框内）
disabled ：禁用（提交的时候不能将值提交给后台，任何表单域都能使用）

<body>
    <div>
            <label for="">性别</label>
            <input type="radio" name="gender" id="" value="男"><label>男</label>
            <input type="radio" name="gender" id="" value="女"><label>女</label>
    </div>
</body>
<script>
    //获取单选复选的值
 fn.onsubmit = function(e){
            //再提交之前做一些验证（如果没有onsubmit这个事件不管什么情况都会提交，如果有的话就会根据情况来阻止（e.preventDefault）或者提交）
            let gender="";
            for(let i=0;i<genders.length;i++){
                if(genders[i].checked){
                    gender = genders[i].value;
                }
            }
            console.log("性别为："+gender);
            //阻止页面跳转
            e.preventDefault();
        }
</script>

五：表单事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单事件</title>
</head>
<body>
    <form action="#" id="forml" name="forml">
        <div>
            <label for="usernaem">
                账户：<input type="text" name="username" id="username">
        </div>
        <div>
            <label for="userpwd">
                密码：<input type="password" name="password" id="password">
        </div>
        <div>
            <label for="">性别</label>
            <input type="radio" name="gender" id="" value="男"><label>男</label>
            <input type="radio" name="gender" id="" value="女"><label>女</label>
        </div>
        <div>
            <input type="submit" value="提交" id="tijiao">
            <input type="reset" value="重置" id="">
            <input type="search" name="search" id="search" value="搜索">
            <p id="ss">提交</p>
            <p id="rr">重置</p>
        </div>
    </form>
    <script>
        //使不是重置和提交按钮的使用提交和重置方法
        let tijiao = document.getElementById("tijiao");
        let ss = document.getElementById("ss");
        let genders = document.getElementsByName("gender");
        let fn = document.forml;
        let username = document.getElementById("username");
        let search = document.getElementById("search");
        //提交方法
        ss.onclick = function(){
            fn.submit();
        }
        //重置方法
        rr.onclick = function(){
            fn.reset();
        }
        //提交事件
        fn.onsubmit = function(e){
            //在提交之前做一些验证（如果没有onsubmit这个事件不管什么情况都会提交，如果有的话就会根据情况来阻止（e.preventDefault）或者提交）
            let gender="";
            for(let i=0;i<genders.length;i++){
                if(genders[i].checked){
                    gender = genders[i].value;
                }
            }
            console.log("性别为："+gender);
            //阻止页面跳转
            e.preventDefault();
        }
        //焦点事件
        username.onfocus = function(){
            console.log("获取焦点");
        }
        username.onblur = function(){
            console.log("失去焦点");
        }
        //change事件
        username.onchange = function(){
            console.log("change事件");
        }
        //input事件
        username.oninput = function(){
            console.log("input事件");
        }
        //onselect事件
        username.onselect = function(){
            console.log("文本被选中");
        }
        //onsearch收索
        search.onsearch = function(){
            console.log(this.value);
            console.log("搜索");
            // 这个后面会出现"x"   删除之前所打出的文字
        }
    </script>
</body>
</html>

表单元素使用的事件：提交事件和重置事件

表单域使用的事件：焦点事件，change事件，input事件

1.提交事件

提交事件：form.onsubmit
提交方法：submit()

2.重置事件

重置事件：form.onreset
重置方法：reset()

3.焦点事件

获取焦点：onfocus
失去焦点：onblur

4.change事件

onchange：如果是输入框的change事件，需要改变内容后失去焦点才会触发

5.input事件

oninput:只有输入框能够触发这个事件，只要改变输入框的内容就会触发

6.选择事件

onselect

7.搜索事件

onsearch

六：下拉和多选列表

<body>
    <select name="" id="city">
        <option value="cd">成都</option>
        <option value="ms">眉山</option>
        <option value="dy">德阳</option>
        <option value="nc">南充</option>
    </select>
    <select name="" id="province" multiple>
        <option value="sc">四川</option>
        <option value="gz">广州</option>
        <option value="yn">云南</option>
        <option value="wh">武汉</option>
    </select>
    <input type="button" value="增加" id="add">
    <input type="button" value="删除" id="del">
</body>
<script>
	let city = document.getElementById("city");
    let add = document.getElementById("add");
    let del = document.getElementById("del");
    let province = document.getElementById("province");
    let getBtn = document.getElementById("getBtn");
</script>

1.添加元素

new Option("text","value",defaultSelected,selected)
- defaultSelected：这个元素默认是否被选中
- selected：这个元素当前是否为选中状态
select.add()

add.onclick = function(){
            let obj = new Option("遂宁","sn");
            city.add(obj)
        }

2.删除元素

select.remove(索引)
select.options.length=0 :快速删除所有options元素节点的方法

del.onclick = function(){
             city.remove(0);
            //快速删除所有options节点
            //city.options.length=0;
        }

3.获取选中元素

selectedlndex :获取选中的文本

 getBtn.onclick = function(){
            //获取下拉泪飙选中元素的value值
            console.log(city.value);
            //获取下拉列表选中元素的文本内容
            //selectedIndex获取选中元素的下标值
            console.log(city.options[city.selectedIndex].text);
            //如果是多选列表，value和selectedIndex只能获取第一个值
            //循环列表，判断元素是否被选中
            for(let i=0;i<province.options.length;i++){
                if(province.options[i].selected){
                    console.log(province.options[i].value,province.options[i].text);
                }
            }
        }