JavaScript 与表单
JS教程
  • 请登录查看

JavaScript 与表单

2021-05-06 12:50:30 更新

B站关联视频教程：https://www.bilibili.com/video/BV1RA41137yd?p=21

目录：

一、事件绑定

二、表单提交 【表单提交验证的3种写法】

    1、绑定到<form上的 onSubmit事件

    2、绑定到真正的提交按钮上的

    3、绑定到伪提交按钮上

三、表单元素值的获取及赋值

1、js原生写法，主要有四种获取html对象写法： 

    1）document.getElementById("html元素的id属性值");

    2）document.getElementsByName("html元素的name属性值");

    3）document.getElementsByClassName('html元素的class属性值');

    4）document.getElementsByTagName('html元素的标签名')

2、主要有五种html表单元素：

    input 文本

    textarea 文本域

    radio 单选

    checkbox 多选

    select 下拉


内容:

一、事件绑定

常见常用事件：

1、鼠标；2、键盘；3、文档；4、表单


二、表单提交 【表单提交验证的3种写法】

1、绑定到<form上的 onSubmit事件 

<form action="abc.html" method="post"  onSubmit=" return checksub();">

<form action="" method="post" onsubmit="return checksub();">
    用户名：
    <input type="text" id="username" name="username"/><br/>
    密码：
    <input type="text" id="password" name="password"/><br/>
 
    <input type="submit" value="提交"/>
</form>

<script>
    function checksub(){
        uname=document.getElementById("username").value;
        alert("您的用户名是："+uname);//弹出输入的用户名信息
        return false;
    }
</script>

2、绑定到真正的提交按钮上的

<input type="submit" value="提交" onClick="return checksub();" /> 

<form action="" method="post">
    用户名：
    <input type="text" id="username" name="username"/><br/>
    密码：
    <input type="text" id="password" name="password"/><br/>
 
    <input type="submit" value="提交" onclick="return checksub();"/>
</form>

<script>
    function checksub(){
        uname=document.getElementById("username").value;
        alert("您的用户名是："+uname);//弹出输入的用户名信息
        return false;
    }
</script>

3、绑定到伪提交按钮上，如: 

<a href="#none" onClick="checksub();">提交按钮</a>

<form action="" method="post">
    用户名：
    <input type="text" id="username" name="username"/><br/>
    密码：
    <input type="text" id="password" name="password"/><br/>
    
    <a href="#none" onClick="checksub();">提交按钮</a>
   
</form>

<script>
    function checksub(){
        uname=document.getElementById("username").value;
        alert("您的用户名是："+uname);//弹出输入的用户名信息
        return false;
    }
</script>

上面这个写法，可以验证数据，但是无法提交表单。针对伪提交按钮，我们需要操作form表单执行提交动作 document.getElementById("表单id").submit(); 看如下代码：

<form action="" method="post" id="f" >
    <input type="text" id="username" name="username" />
    <!--<input type="submit" value="提交" onclick="return checksub();"/>-->
    <a href="#none" onclick="checksub();">提交</a>
</form>
<script>
    function checksub(){
        //alert(666);
        username=document.getElementById("username").value;
        if(username){
            document.getElementById("f").submit();
        }else{
            alert("请输入用户名");
        }
    }

</script>


三、表单元素值的获取及赋值

1、js原生写法，主要有四种获取html对象写法： 

1）document.getElementById("html元素的id属性值");

2）document.getElementsByName("html元素的name属性值");

3）document.getElementsByClassName('html元素的class属性值');

4）document.getElementsByTagName('html元素的标签名')

//注：根据html的id,获得单个元素对象
document.getElementById("html元素的id属性值");//获得对象
document.getElementById("html元素的id属性值").value;//获得对象的value

//注：根据html的name,获得多个元素对象
document.getElementsByName("html元素的name属性值");

//注：根据html的class,获得多个元素对象
document.getElementsByName("html元素的class属性值");

//注：根据html的标签名,获得多个元素对象
document.getElementsByName("html元素的标签名");

1）document.getElementById("html元素的id属性值");

<input type="text" id="value" value="itwenda.com"/>
<script>
   var v=document.getElementById('value').value;
   document.write(v);//itwenda.com
</script>

2）document.getElementsByName("html元素的name属性值");

<input  type="radio" value='1' name='sex'/>男
<input  type="radio" value='0' name='sex'/>女
<script>
        var obj = document.getElementsByName("sex");
        document.write("<br/>");
        document.write(obj[0].value);//1
        document.write("<br/>");
        document.write(obj[1].value);//0
</script>

3）document.getElementsByClassName('html元素的class属性值')

<input type="text" id="value" class="classname" value="itwenda.com"/>
<script>
   var v=document.getElementsByClassName('classname')[0].value;
   document.write(v);//itwenda.com
</script>

4）document.getElementsByTagName('html元素的标签名')

<input type="text" id="value" class="classname" value="itwenda.com"/>
<script>
   var v=document.getElementsByTagName('input')[0].value;
   document.write(v);//itwenda.com
</script>

2、主要有五种html表单元素：

input text文本

获得：

<input type="text" id="value" placeholder="要获取的输入的值"/>
<input type="button" value="获得input值" onclick="huoqu()"/>
 
 <script type="text/javascript">
    function huoqu(){
        var v=document.getElementById('value').value;
        alert(v);
    }
</script>

赋值：

<input type="text" id="value" placeholder="要获取的输入的值"/>
<input type="button" value="赋值input值" onclick="huoqu()"/>
 
 <script type="text/javascript">
    function huoqu(){
        var v=document.getElementById('value').value=666;
        //alert(v);
    }
</script>

textarea 文本域

获得：

<textarea  id="value" placeholder="要获取的输入的值"></textarea>
<input type="button" value="获得textarea值" onclick="huoqu()"/>
 
 <script type="text/javascript">
    function huoqu(){
        var v=document.getElementById('value').value;
        alert(v);
    }
</script>

赋值：

<textarea  id="value" placeholder="要获取的输入的值"></textarea>
<input type="button" value="定义textarea值" onclick="huoqu()"/>
 
 <script type="text/javascript">
    function huoqu(){
        var v=document.getElementById('value').value=666;
        // alert(v);
    }
</script>


radio 单选

获的：

<input  type="radio" value='1' name='sex'/>男
<input  type="radio" value='0' name='sex'/>女

<input type="button" value="获得radio值" onclick="huoqu()"/>

<script type="text/javascript">
    function huoqu(){
        alert(select_value("sex"))
    }
    //str是radio的name
    function select_value(str){
        var obj = document.getElementsByName(str);
        var obj_value;
        for (var i=0; i < obj.length; i++){
            if (obj[i].checked){
                obj_value = obj[i].value;
            }
        }
        return obj_value;
    }
</script>

选中：【对象.checked = true;】

<input  type="radio" id="value" value='1' name='sex'/>男
<input  type="radio" id="value" value='0' name='sex'/>女

<input type="button" value="赋值radio，选择值为1的‘男’" onclick="huoqu()"/>

<script type="text/javascript">
    function huoqu(){
        // alert(select_value("sex"))
        select_value("sex",1)
    }
    //str是radio的name
    function select_value(str,v){
        var obj = document.getElementsByName(str);
        var obj_value;
        for (var i=0; i < obj.length; i++){
            // if (obj[i].checked){
            //     obj_value = obj[i].value;
            // }
            if (obj[i].value==v){
               obj[i].checked = true;
            }
        }
        return obj_value;
    }
</script>


checkbox 多选

获得：

<input  type="checkbox" id="value" value='1' name='web[]'/>php
<input  type="checkbox" id="value" value='0' name='web[]'/>js

<input type="button" value="获得checkbox值" onclick="huoqu()"/>

<script type="text/javascript">
    function huoqu(){
        alert(select_value("web[]"))
    }
    //str是checkbox的name
    function select_value(str){
        var obj = document.getElementsByName(str);
       
        var obj_value=[];
        for (var i=0; i < obj.length; i++){
            if (obj[i].checked){
                obj_value.push(obj[i].value);
            }
        }
        return obj_value;
    }
</script>

选中：【对象.checked = true;】

<input  type="checkbox" id="value" value='1' name='web[]'/>php
<input  type="checkbox" id="value" value='0' name='web[]'/>js

<input type="button" value="值为1或0的被选中，点击" onclick="huoqu()"/>

<script type="text/javascript">
    function huoqu(){
        // alert(select_value("web[]"))
        select_value("web[]","1,0")
    }
    //str是checkbox的name
    function select_value(str,v){
        var obj = document.getElementsByName(str);
       
        // var obj_value=[];
         arr=v.split(",");//[1,0]
        for (var i=0; i < obj.length; i++){
            // if (obj[i].checked){
            //     obj_value.push(obj[i].value);
            // }
            for(var j=0;j<arr.length;j++){
                if(arr[j]==obj[i].value){
                    obj[i].checked=true;
                }
            }
           
        }
        return obj_value;
    }
</script>


select 【对象.selected= true;】

获得：

<select name="web" id="value">
    <option value="1">男</option>
    <option value="0">女</option>
</select>

<input type="button" value="获得select值" onclick="huoqu()"/>

<script type="text/javascript">
    function huoqu(){
        alert(select_value("value"))
    }
    //str是select的id
    function select_value(str){
        var obj = document.getElementById(str);
        for (var i=0; i < obj.length; i++){
            if (obj[i].selected){
                obj_value=obj[i].value;
                break;
            }
        }
        return obj_value;
    }
</script>

选中：

<select name="web" id="value">
    <option value="1">男</option>
    <option value="0">女</option>
</select>

<input type="button" value="点击，选中女" onclick="huoqu()"/>

<script type="text/javascript">
    function huoqu(){
        // alert(select_value("value"))
        select_value("value",0)
    }
    //str是select的id
    function select_value(str,v){
        var obj = document.getElementById(str);
        for (var i=0; i < obj.length; i++){
            // if (obj[i].selected){
            //     obj_value=obj[i].value;
            //     break;
            // }
            if(obj[i].value==v){
                obj[i].selected=true;
                break;
            }
        }
        return obj_value;
    }
</script>

总结：

1、input text文本，select 下拉，textarea 文本域使用：document.getElementById("标签id")得到的是单个对象

document.getElementById("标签id")

2、radio 单选，checkbox多选使用：getElementsByName("标签name")得到的是多个对象。

注意：虽然radio是单选，但是也是多个值中选择。

document.getElementsByName("标签name")



关注公众号，了解更多it技术（it问答网）
← JavaScript Math 对象
JavaScript 正则表达式→