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;
    }