JS事件、Bom對象和Dom對象（4）（樂字節架構）

時間 2020-07-14

標籤事件 bom 對象 dom 字節架構欄目 JavaScript 简体版

原文原文鏈接

若是你想成爲一名優秀的java架構師，看這裏 → 樂字節免費公開課（騰訊課堂）javascript

如須要跟多資料請點擊右側（記住入羣暗號：66） → 這是一條不歸路，有禿頭風險，請慎重選擇！
#html

表單

表單是咱們頁面向後臺傳輸數據的一種很是常見的方式，在進行數據發送（請求發出）以前，咱們應該如今頁面進行一系列數據合法性的驗證，節省沒必要要的錯誤數據的傳輸，以及提升用戶的體驗度。java

獲取表單

前兩種經常使用ios

一、document.表單名稱
二、document.getElementById(表單 id);
三、document.forms[表單名稱]
四、document.forms[索引]; //從 0 開始

例如：數組

<body>
    <form id='myform' name="myform" action="" method="post"></form>
    <form id='myform2' name="myform2" action="" method="post"></form>
</body>
<script>
    //四種方式
    var form =document.getElementById("myform");
    form =document.myform;
    form =document.forms["myform"];
    form =document.forms[0];
    console.log(form);
</script>

獲取表單元素

獲取input元素

如 text password hidden textarea等，前兩種經常使用。架構

1)、經過 id 獲取：document.getElementById(元素 id);
2)、經過 form.名稱形式獲取: myform.元素名稱;    name屬性值
3)、經過 name 獲取 :document.getElementsByName(name屬性值)[索引] // 從0開始
4)、經過 tagName 數組 :document.getElementsByTagName('input')[索引] // 從0開始

<body>
    <form id='myform' name="myform" action="" method="get">     
        姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
        密碼:<input type="password" id="upwd" name="upwd" value="1234"/><br />
        <input type="hidden" id="uno" name="uno" value="隱藏域" />
        我的說明:<textarea name="intro"></textarea>
        <button type="button" onclick="getTxt();" >獲取元素內容</button>
    </form>
</body>
<script>
    function getTxt(){
        var uno = document.getElementById("uno");
        var uname = myform.uname;
        console.log(uname + "--------");
        var upwd = document.getElementsByTagName('input')[1] ;
        var intro = document.getElementsByName("intro")[0];             
        console.log(uno.value +"，"+ uname.value +"，"+ upwd.value +"，"+ intro.value);
    }
</script>

獲取單選按鈕

前提：將一組單選按鈕設置相同的name屬性值dom

(1)獲取單選按鈕組：ide

document.getElementsByName("name屬性值");

(2)遍歷每一個單選按鈕，並查看單選按鈕元素的checked屬性

若屬性值爲true表示被選中，不然未被選中函數

選中狀態設定： checked='checked' 或 checked='true' 或 checked post

未選中狀態設定：沒有checked屬性或 checked='false'

<form action="" name="myform">
    <input type="text" name="inputName" value="aaa" />
    <input type="radio" name="rad" value="1" /> 1
    <input type="radio" name="rad" value="2"  /> 2
</form>

<script type="text/javascript">
    var radios = document.getElementsByName('rad');
    //radios[0].checked = 'checked'
    for(var i = 0; i<radios.length; i++){
        console.log(radios[i].checked + '---' + radios[i].value)
    }
</script>

獲取多選按鈕

操做方式與單選同理，不一樣之處在於能夠多選

var ufav = document.getElementsByName("ufav");
var favstr = "";
    for (i = 0;i < ufav.length; i++){
        if(ufav[i].checked){
            favstr += ufav[i].value+",";
        }
    }
favstr = favstr.substr(0,favstr.length-1);

獲取下拉選項

（1）獲取 select 對象：

var ufrom = document.getElementById("ufrom");

（2）獲取選中項的索引：

var idx = ufrom.selectedIndex;

（3）獲取選中項 options 的 value屬性值：

var val = ufrom.options[idx].value;

注意：當經過options獲取選中項的value屬性值時，

若沒有value屬性，則取option標籤的內容

若存在value屬性，則取value屬性的值

（4）獲取選中項 options 的 text：

var txt = ufrom.options[idx].text;

選中狀態設定：selected='selected'、selected=true、selected

未選中狀態設定：不設selected屬性

<body onload="init()">
    <form id='myform' name="myform" action="" method="">        
        來自:
        <select id="ufrom" name="ufrom">
            <option value="-1" >請選擇</option>
            <option value="0" selected="selected">北京</option>
            <option value="1">上海</option>
        </select><br />
        <button type="button" id="sub" name="sub">提交</button>
    </form>
</body>
<script>
    function init () {
        var sub = document.getElementById("sub");
        sub.onclick = function () {
            //獲取select對象
            var ufrom = document.getElementById("ufrom");
            console.log("表單對象：" + ufrom);
            //獲取選中的索引
            var idx = ufrom.selectedIndex;
            console.log("選中項的索引值：" + idx);
            //獲取選中項的value值
            var val = ufrom.options[idx].value;
            console.log("選中項的value屬性值：" + val);
            //獲取選中項的text
            var txt = ufrom.options[idx].text;
            console.log("選中項的text：" + txt);
        }
    }
</script>

提交表單

（1）使用普通button按鈕+onclick事件+事件中編寫代碼:

獲取表單.submit();

（2）使用submit按鈕 + onclick="return 函數()" +函數編寫代碼:

最後必須返回：return true|false;

（3）使用submit按鈕/圖片提交按鈕 + 表單onsubmit="return 函數();" +函數編寫代碼:

最後必須返回：return true|false;

<form id='myform1' name="myform2" action="#" method="get" onsubmit="return onsub();">   
    <input  name="test"  id="uname"/><span id="msg"></span><br />
    <!--經過js事件：sub()提交表單-->
    <input type="button" onclick="sub();" value="提交表單1" />
    <input type="submit" onclick="return sub2();" value="提交表單2" />
    <input type="submit" value="提交onsubmit" /><br />
    <input type="image" src="img/u=71331624,2965806045&fm=23&gp=0.jpg" 
                  width="60px" height="40px" />
</form>
<script type="text/javascript">     
    // input的type=button，調用submit()方法提交
    function sub(){
        document.myform2.submit();
    }
    // 進行校驗，返回值爲true才能提交
    function sub2(){
        var uname = document.getElementById("uname");
        var val  = uname.value;
        if(val.length>0){
            return true; // 提交
        }
        document.getElementById("msg").innerHTML = "不能空着啊！！！";
        document.getElementById("msg").style.color="red";
        return false;  // 不提交
    }
    // onsubmit事件提交
    function onsub () {
        var uname = document.getElementById("uname");
        var val  = uname.value;
        if(val.length>0){
            return true; // 提交
        }
        document.getElementById("msg").innerHTML = "填寫點兒東西唄！(ˉ▽￣～) 切~~";
        document.getElementById("msg").style.color="red";
        return false; // 不提交
    }
</script>

表單校驗

<form id='myform' name="myform">
 姓名:<input type="text" id="uname" name="uname" /><br />
 密碼:<input type="password" id="upwd" name="upwd" /><br />
 年齡:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
      <input type="radio" name="uage" value="1"/>你懂得 <br />
 愛好:<input type="checkbox" name="ufav" value="籃球"/>籃球
      <input type="checkbox" name="ufav" value="爬牀"/>爬牀
      <input type="checkbox" name="ufav" value="代碼"/>代碼<br />
 來自:<select id="ufrom" name="ufrom">
          <option value="-1" selected="selected">請選擇</option>
          <option value="0">北京</option>
          <option value="1">上海</option>
      </select><br />
      <div id="validate" style="color: red;"></div>
      <button type="submit" onclick="return checkForm();">提交</button>
      <button type="reset" onclick="resetForm();">重置</button>
</form>

/**
  要求：
    一、驗證用戶名
      1)不能爲空
      2)長度爲 6-12 位
    二、驗證密碼
      1)不能爲空 *
      2)長度爲 6-12 位
      3)不能包含用戶名
    三、年齡: 必須選擇 你懂得
    四、愛好: 必須選擇一項
    五、來自: 必須選擇一項
    知足以上條件
        一、彈出全部的內容
        二、提交表單
    不然
        一、說明錯誤緣由
        二、不能提交表單
*/

// 經過id屬性值獲得dom對象
function $(id) {
    return document.getElementById(id);
}
// 重置表單全部元素 注意函數不能命名爲 clear reset 等
function resetForm(){
    // 獲取說明 div
    var validate =$('validate');
    validate.innerHTML ="";
}
// 表單校驗
function checkForm () {
    var flag =true;
    // 獲取說明 div
    var validate = $('validate');
    validate.innerHTML ="";
    // 一、驗證用戶名
    // 1)、獲取用戶名的值
    var uname = $('uname').value;
    // 1)不能爲空 -->後期正則處理
    // 2)長度爲 6-12 位
    if("" === uname || uname.length == 0 ){
        validate.innerHTML += "*用戶名不能爲空</br>";
        flag = false;
    }else if(uname.length < 6 || uname.length > 12){
        validate.innerHTML += "*用戶名長度在 6-12 位</br>";
        flag = false;
    }
    // 二、驗證密碼
    var upwd = $('upwd').value;
    // 1)不能爲空
    // 2)長度爲 6-12 位
    // 3)不能包含用戶名
    if("" === upwd || upwd.length == 0 ){
        validate.innerHTML += "*密碼不能爲空</br>";
        flag = false;
    } else if(upwd.length < 6 ||upwd.length > 12){
        validate.innerHTML += "*密碼長度在 6-12 位</br>";
        flag = false;
    } else if(uname.length > 0 && upwd.indexOf(uname) >= 0){
        validate.innerHTML += "*密碼中不能出現用戶名</br>";
        flag = false;
    }
    // 三、年齡: 必須選擇 你懂得
    var ageGroup = document.getElementsByName("uage");
    var age ;
    for (var i = 0; i < ageGroup.length; i++) {
        if(ageGroup[i].checked){
            age = ageGroup[i].value;
        }
    }
    if(age == 0){
        flag = false;
        validate.innerHTML += "*小屁孩，媽媽喊你回家</br>";
    }
    // 四、愛好: 必須選擇一項
    var ufav = document.getElementsByName("ufav");
    var favstr = "";
    for (i = 0;i < ufav.length; i++){
        if(ufav[i].checked){
            favstr += ufav[i].value + ",";
        }
    }
    favstr = favstr.substr(0,favstr.length-1);
    if(favstr.length < 1){
        flag = false;
        validate.innerHTML += "*人生真無趣</br>";
    }
    // 五、來自
    var ufrom = $('ufrom');
    var idx = ufrom.selectedIndex ;
    var val = ufrom.options[idx].value;
    var valTxt = ufrom.options[idx].text;
    if(-1 == val){
        flag = false;
        validate.innerHTML += "*你來自火星嗎?</br>";
    }
    // 知足以上條件 彈出內容
    if(flag){
        var str = "";
        str += "您的姓名是:" + uname + "\n";
        str += "您的密碼是:" + upwd + "\n";
        str += "您的年齡是:" + "能夠贏取白富美了" + "\n";
        str += "您的愛好是:" + favstr + "\n";
        str += "您來自於:" + valTxt + "\n";
        alert(str);
        // 設置表單提交的地址
        myform.action="http://www.baidu.com";
        // 提交表單
        myform.submit();
        return false;
    } else {
        return false;
    }