javascript-对表单的操作

作者: ssttIsme | 来源:发表于2020-01-04 20:30 被阅读0次

javascript-对表单的操作
Javascript-对表单的操作（下）
Javascript-对表单的操作（上）
javascript-对文档对象的内容、属性和样式的操作
javascript-事件基础和事件绑定
廖雪峰的JS教程5-浏览器(二)
Javascript-表单脚本
Vue常用特性
表单操作，表单域操作
受控组件vs非受控组件（input为例）

javascript对表单的操作

一、获取对表单的引用

A.直接通过定位的方式获取

document.getElementById("表单id");
document.getElementsByName("表单name")[下标];
document.getElementsByTagName("form")[下标];

B.通过集合的方式来获取

document.forms[下标]
document.forms["表单name"]
document.forms.表单name

C.通过name直接获取
document.表单name

<body>
<form name="myForm" id="form1" action="" method="post">
    姓名:<input type="text" name="username"/><br/>
    年龄:<input type="text" name="age"/><br/>
    性别:<input type="radio" name="gender" value="man"/>男
    <input type="radio" name="gender" value="woman"/>女<br/>
    爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
    <input type="checkbox" name="hobby[]" value="yoga"/>瑜伽
    <input type="checkbox" name="hobby[]" value="football"/>足球<br/>
    地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
    简介:<br/>
    <textarea cols="60" rows="10" name="info"></textarea><br/>
    <input type="button" value="提交"/>
</form>
<div id="content"></div>
<script>
    var div=document.getElementById("content");
    /*var myForm=document.getElementById("form1");
   div.innerHTML=myForm.name;*/

    /*var myForm=document.getElementsByName("myForm")[0];
    div.innerHTML=myForm.name;*/

   /* var myForm=document.getElementsByTagName("form")[0];
    var div=document.getElementById("content");
    div.innerHTML=myForm.name;*/

   /*var myForm=document.forms[0];
    div.innerHTML=myForm.name;*/

   /*var myForm=document.forms["myForm"];
   div.innerHTML=myForm.name;*/

   /*var myForm=document.forms.myForm;
   div.innerHTML=myForm.name;*/

   var myForm=document.myForm;
   div.innerHTML=myForm.name;
</script>
</body>

二、获取表单元素的引用

A.直接获取

document.getElementById("表单元素id");
document.getElementsByName("表单元素name")[下标];
document.getElementsByTagName("表单元素")[下标];

B.通过集合的方式来获取
表单对象.elements获取表单里面所有元素的集合

表单对象.elements[下标]
表单对象.elements[表单元素name]
表单对象.elements.表单元素name

C.直接通过name的方式
document.表单name.表单元素name

<form name="myForm" id="form1" action="" method="post">
    姓名:<input type="text" name="username" id="username" value="张三"/><br/>
    年龄:<input type="text" name="age"/><br/>
    性别:<input type="radio" name="gender" value="man"/>男
    <input type="radio" name="gender" value="woman"/>女<br/>
    爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
    <input type="checkbox" name="hobby[]" value="yoga"/>瑜伽
    <input type="checkbox" name="hobby[]" value="football"/>足球<br/>
    地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
    简介:<br/>
    <textarea cols="60" rows="10" name="info"></textarea><br/>
    <input type="button" value="提交"/>
</form>
<div id="content"></div>
<script>
    var div=document.getElementById("content");
    // var username=document.getElementById("username").value;
    // var username=document.getElementsByName("username")[0].value;
    // var username=document.getElementsByTagName("input")[0].value;
    //var eles=document.myForm.elements;
    //alert(eles);
    //var username=document.myForm.elements[0].value;
    //var username=document.myForm.elements["username"].value;
    //var username=document.myForm.elements.username.value;
    var username=document.myForm.username.value;
    div.innerHTML=username;
</script>

三、表单元素共同的属性和方法

3.1获取表单元素的值

表单元素对象.value获取或者设置值

3.2属性

disabled获取或者设置表单是否禁用

<form name="myForm" id="form1" action="" method="post">
    姓名:<input type="text" name="username" id="username" value="张三"/><br/>
    年龄:<input type="text" name="age" value="13"/><br/>
    性别:<input type="radio" name="gender" value="man"/>男
    <input type="radio" name="gender" value="woman"/>女<br/>
    爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
    <input type="checkbox" name="hobby[]" value="yoga"/>瑜伽
    <input type="checkbox" name="hobby[]" value="football"/>足球<br/>
    地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
    简介:<br/>
    <textarea cols="60" rows="10" name="info"></textarea><br/>
    <input type="button" value="提交"/>
</form>

<script>
    document.myForm.username.disabled=true;
    document.myForm.address.disabled=true;
</script>

form指向包含本元素的表单的引用

<form name="myForm" id="form1" action="" method="post">
    姓名:<input type="text" name="username" id="username" value="张三"/><br/>
    年龄:<input type="text" name="age" value="13"/><br/>
    性别:<input type="radio" name="gender" value="man"/>男
    <input type="radio" name="gender" value="woman"/>女<br/>
    爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
    <input type="checkbox" name="hobby[]" value="yoga"/>瑜伽
    <input type="checkbox" name="hobby[]" value="football"/>足球<br/>
    地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
    简介:<br/>
    <textarea cols="60" rows="10" name="info"></textarea><br/>
    <input type="button" value="提交"/>
</form>
<div id="content"></div>
<script>
    var div=document.getElementById("content");
    var age=document.forms[0].elements.age;
    div.innerHTML="age:"+age.value+" age所在表单名为:"+age.form.name;
</script>

3.3方法

blur()失去焦点
foucus()获得焦点

<body>
<form name="myForm" id="form1" action="" method="post">
    姓名:<input type="text" name="username" /><br/>
    <input type="button" value="提交"/>
</form>
<script>
    var username=document.myForm.username;
    username.focus();
</script>

<form name="myForm" id="form1" action="" method="post">
    姓名:<input type="text" name="username" value="张三" onblur="getUserName()"/><br/>
</form>
<div id="content"></div>
<script>
    var div=document.getElementById("content");
    document.myForm.username.focus();
    function getUserName(){
        div.innerHTML=document.myForm.username.value;
    }
</script>

四、表单元素特殊属性和方法

4.1、文本域

<input type="text"/>
操作文本域的值
value属性，设置或者获取值

<form name="myForm" id="form1" action="" method="post">
    姓名:<input type="text" name="username" value="张三"/><br/>
</form>
<div id="content"></div>
<script>
    var div=document.getElementById("content");
    var username=document.forms[0].elements.username.value;
    div.innerHTML=username;
</script>

<form name="myForm" id="form1" action="" method="post">
    姓名:<input type="text" name="username" value="张三"/><br/>
</form>
<div id="content"></div>
<script>
    var div=document.getElementById("content");
    var username=document.forms[0].elements.username.value="李四";
    div.innerHTML=username;
</script>

提示内容例子

<form name="myForm" id="form1" action="" method="post">
  <input type="text" name="q" value="请输入搜索内容" onfocus="if (this.value=='请输入搜索内容')this.value='' "
  onblur="this.value=(this.value==''?'请输入搜索内容':this.value)"/>
    <button>搜索</button>
</form>

4.2、单选按钮

checked返回或者设置单选按钮的选中状态。true选中，false未选中。value属性:获取值。获取选中的值，
必须先判断选中状态

<form name="myForm" id="form1" method="post">
    性别:<input type="radio" name="gender" value="man"/>男
    <input type="radio" name="gender" value="woman" checked/>女<br/>
    <input type="button" onclick="getGender()"  value="提交">
</form>
<div id="content"></div>
<script>
    var gender=document.myForm.gender;
   function getGender(){
       for (var i=0;i<gender.length;i++){
           if(gender[i].checked){
              alert(gender[i].value);
           }
       }
   }
</script>

4.3、多选按钮

checked返回或者设置多选按钮的选中状态。true选中，false未选中。value属性:获取值。获取选中的值，
必须先判断选中状态

<form name="myForm" id="form1" method="post">
    爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
    <input type="checkbox" name="hobby[]" value="yoga" checked/>瑜伽
    <input type="checkbox" name="hobby[]" value="football"/>足球<br/>
    <input type="button" onclick="getHobby()"  value="提交">
</form>
<div id="content"></div>
<script>
   function getHobby(){
       var div=document.getElementById("content");
       var hobby=document.myForm["hobby[]"];
       var hobbyArray=[];
       for (var i=0;i<hobby.length;i++){
           if(hobby[i].checked){
              hobbyArray.push(hobby[i].value);
           }
       }
       div.innerHTML=hobbyArray;
   }
</script>

4.4、下拉框

selected返回或者设置下拉框的选中状态。true选中，false未选中。
selectedIndex设置或者返回下拉框被选中的索引号。

<form name="myForm" id="form1" method="post">
    地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
    <input type="button" onclick="getAddr()"  value="提交">
</form>
<div id="content"></div>
<script>
    var address=document.myForm.address;
    address[1].selected=true;//上海
</script>

<form name="myForm" id="form1" method="post">
    地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
    <input type="button" onclick="getAddr()"  value="提交">
</form>
<div id="content"></div>
<script>
    var address=document.myForm.address;
    address.selectedIndex=1;//上海
</script>

<form name="myForm" id="form1" method="post">
    地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
    <input type="button" onclick="getAddr()"  value="提交">
</form>
<hr>
<div id="content"></div>
<script>
       var div=document.getElementById("content");
       var address=document.myForm.address;
       function getAddr() {
           div.innerHTML=address[address.selectedIndex].value;
       }
</script>

<form name="myForm" id="form1" method="post">
    地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
    <input type="button" onclick="getAddr()"  value="提交">
</form>
<hr>
<div id="content"></div>
<script>
       var div=document.getElementById("content");
       var address=document.myForm.address;
       address.onchange=function () {
           div.innerHTML=address[address.selectedIndex].value;
       }
</script>

4.5、文本区域

<textarea></textarea>操作文本区域的值value属性，设置或者获取值

<form name="myForm" id="form1" action="" method="post">
    简介:<br/>
    <textarea cols="60" rows="10" name="info"></textarea>
    <div id="content">一共能输入20个字符，已输入0个，还剩余20个</div>
    <input type="button" value="提交"/>
</form>

<script>
    var div=document.getElementById("content");
    var info=document.myForm.info;
    function check(str) {
        var num=0;
        for(var i=0;i<str.length;i++){
            if(str.charCodeAt(i)>=0&&str.charCodeAt(i)<=255){
                num++;
            }else{
                num=num+2;
            }
        }
        return num;
    }
    info.onkeyup=info.onkeydown=function () {
        var str=info.value;
        var lengths=check(str);
        var totalLength=20;
        if(lengths>=totalLength){
            lengths=totalLength;
            info.style.borderColor="red";
            info.value=str.substring(0,totalLength);
        }else{
            info.style.borderColor="cyan";
        }
        div.innerHTML="一共能输入"+totalLength+"个字符，已输入"+lengths+"个，还剩余"+(totalLength-lengths)+"个";
    }
</script>

五、验证表单

1.事件
onsubmit当表单提交的时候触发的事件
onblur失去焦点
onfocus获得焦点

<form name="myForm" id="form1" action="" method="post" onsubmit="return valid(this)">
    姓名:<input type="text" name="username" /><br/>
    年龄:<input type="text" name="age" /><br/>
    性别:<input type="radio" name="gender" value="man"/>男
    <input type="radio" name="gender" value="woman"/>女<br/>
    爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
    <input type="checkbox" name="hobby[]" value="yoga"/>瑜伽
    <input type="checkbox" name="hobby[]" value="football"/>足球<br/>
    地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
    简介:<br/>
    <textarea cols="60" rows="10" name="info"></textarea><br/>
    <input type="submit" value="提交"/>
</form>
<script>
    function valid(obj) {
        if(!obj.username.value){
            alert("姓名不能为空！") ;
            return false;
        }
        if(!obj.age.value){
            alert("年龄不能为空！") ;
            return false;
        }
        var status=0;
        for(var i=0;i<obj.gender.length;i++){
            if(obj.gender[i].checked){
                status=1;
            }
        }
        if(!status){
            alert("请选择性别");
            return false;
        }
    }
</script>

提交方法

表单方法表单对象.submit()

<form name="myForm" id="form1" action="" method="post">
    姓名:<input type="text" name="username" /><br/>
    <input type="button" value="提交" name="submitBtn"/>
</form>
<script>

        var submitBtn=document.myForm.submitBtn;
        submitBtn.onclick=function () {
            document.myForm.action="history1.html";
            document.myForm.submit();
        };
        setTimeout(function(){
            alert("超时，结束考试");
            document.myForm.action="history1.html";
            document.myForm.submit();
        },3000);
</script>

javascript-对表单的操作
javascript对表单的操作一、获取对表单的引用 A.直接通过定位的方式获取 B.通过集合的方式来获取 C....
Javascript-对表单的操作（下）
一、文本域二、单选按钮和多选按钮 example: 全选/全不选/反选 1.dom结构 for(var i=0;...
Javascript-对表单的操作（上）
一、获得表单引用通过直接定位的方式获取 document.getElementById(); documen...
javascript-对文档对象的内容、属性和样式的操作
javascript-对文档对象的内容、属性和样式的操作一、操作内容 1.innerHtml用来设置或获取对象起...
javascript-事件基础和事件绑定
javascript-事件基础和事件绑定一、事件驱动 1.1事件 javascript侦测到的用户的操作(点击、...
廖雪峰的JS教程5-浏览器(二)
浏览器（二）（操作表单、操作文件、AJAX、Promise和Canvas）操作表单用JavaScript操作...
Javascript-表单脚本
一、表单的基础知识 1、表单提交普通提交以编程方式调用submit()方法提交表单解决表单重复提交的办法：1...
Vue常用特性
✍目录总览：（表单操作、自定义指令、计算属性、侦听器、过滤器、生命周期）一、表单操作 1. 基于Vue的表单操作...
表单操作，表单域操作
表单操作 1)表单获取方式 1.document.getElementById() 2.document.form...
受控组件vs非受控组件（input为例）
表单可以说是一个web应用里面的核心组件之一了，如何操作表单也是一个前端的基础。以表单组件input 来说，我对...

javascript-对表单的操作