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

如果你想成为一名优秀的 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;}

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

表单

获取表单

获取表单元素

获取 input 元素

获取单选按钮

获取多选按钮

获取下拉选项

提交表单

表单校验

Just My Socks（注册教程内含优惠码）

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

表单

获取表单

获取表单元素

获取 input 元素

获取单选按钮

获取多选按钮

获取下拉选项

提交表单

表单校验

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）