JS事件Bom对象和Dom对象4乐字节架构

5次阅读

共计 7073 个字符，预计需要花费 18 分钟才能阅读完成。

如果你想成为一名优秀的 java 架构师，看这里 → 乐字节免费公开课（腾讯课堂）

如需要跟多资料请点击右侧（记住入群暗号：66）→ 这是一条不归路，有秃头风险，请慎重选择！

表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。

前两种常用

1、document. 表单名称
2、document.getElementById(表单 id);
3、document.forms[表单名称]
4、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>

如 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 属性值

(1) 获取单选按钮组：

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

  (2) 遍历每个单选按钮，并查看单选按钮元素的 checked 属性

若属性值为 true 表示被选中，否则未被选中

选中状态设定：checked=’checked’ 或 checked=’true’ 或 checked

未选中状态设定：没有 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、验证用户名
      1) 不能为空
      2) 长度为 6-12 位
    2、验证密码
      1) 不能为空 *
      2) 长度为 6-12 位
      3) 不能包含用户名
    3、年龄: 必须选择 你懂得
    4、爱好: 必须选择一项
    5、来自: 必须选择一项
    满足以上条件
         1、弹出所有的内容
         2、提交表单
    否则
        1、说明错误原因
        2、不能提交表单
*/

// 通过 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、验证用户名
    // 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;
    }
    // 2、验证密码
    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;
    }
    // 3、年龄: 必须选择 你懂得
    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>";
    }
    // 4、爱好: 必须选择一项
    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>";
    }
    // 5、来自
    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;}

正文完