css第八次笔记

一.表单

1. 获取表单

(1.)document.表单名称
(2.)document.getElement(表单的id)
(3.)document.forms[表单名称]
(4.)document.forms[索引]; //从0开始的

列子:<form id="myform1" name="myform1"></form>
        <form id="myform2" name="myform2"></form>

在这就举前两种比较常用到的:

<script type="text/javascript">
     //第一种

        var form01=document.myform1;
        console.log(form01);


        //第二种
    var form1=document.getElementById('myform1');
    console.log(form1);
</script>

2.获取表单元素 

获取input元素
(1)通过 id获取:document.getElementById(元素的id);
(2)通过 form.名称形式获取:myform.元素名称; —>name属性值
(3)通过 name 获取:document.getElementByName(元素名称)[索引]//从0开始
(4)通过 tagName 数组:document.getElementsByTagName(‘input’)[索引] //从 0 开始

例子:

<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="123456" /><br />
    <input type="hidden" id="uno" name="uno" value="隐藏域" />
    个人说明:<textarea name="intro"></textarea><br />
    <button type="button" onclick="getTxt();" >获取元素内容</button>
</form>

        //第一种    
        var uname=document.getElementById('uname').value;

        console.log(uname);

        //第二种
        //通过 form.名称形式获取: myform.元素名称; --> name 属性值
        var form=document.getElementById('myform').upwd;
        console.log(form);  //通过from.名称获取 name=upwd
        console.log(form.value);

3.获取下拉选项
(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 属性

例子:

<select id="city" name="city">
  <option value="-1" >请选择</option>         <!--索引 0-->
    <option value="beijing" selected="selected">北京</option>  <!--索引 1-->
    <option value="shanghai">上海</option>        <!--索引 2-->
    <option >杭州</option>                <!--索引 3-->        <!-- 若没有 value 属性，则取 option 标签的内容-->
</select><br />

<button onclick="test()">点击</button>


<script type="text/javascript">

    function test(){
        //获取 select 对象
        var city=document.getElementById('city');
      //  获取选中项的索引：
        var id =city.selectedIndex;
       console.log(id);

        //获取选中项 options 的 value 属性值：

        var index1=city.options[1].value;
       console.log(index1);        //beijing

        获取选中项 options 的 text：

        var text1=city.options[2].text;
        console.log(text1);


      //  选中状态设定：selected='selected'、selected=true、selected
       // 未选中状态设定：不设 selected 属性
       var oo= city.options[3].checked=true;  //选中下标为3的下拉按钮,设置为true,设置选中状态

</script>

4.表单提交
提交表单:
（1）使用普通 button 按钮+onclick 事件+事件中编写代码: 获取表单.submit();
（2）使用 submit 按钮 + οnclick=“return 函数()” +函数编写代码: 最后必须返回：return true|false;
（3）使用 submit 按钮/图片提交按钮 + 表单 οnsubmit=“return 函数();” +函数编写代码: 最后必须返回： return true|false;
（4）使用普通 button 按钮+onclick 事件+事件中编写代码: 获取表单.submit();

例子:

<form id="fo" action="https://www.baidu.com" method="get" onsubmit="return sub2() ">

        姓名:<input type="text" id="uname" name="uname"/>         <span id="nameMsg" style="color: #2b82ff"></span> <br />
        密码:<input type="password" id="userpass" name="userpsss"/> <span id="pwdMsg" style="color: #2b82ff"></span> <br />

    <input type="submit" value="登录" onclick="return hh()"/>

</form>


<script type="text/javascript">
    //第一种方法
           function login() {
                // 条件判断
               // 1、得到姓名和密码
                var uname = document.getElementById("uname").value;
                var upwd = document.getElementById("upwd").value;
                // 2、判断用户名和密码是否为空
                if (uname == null || uname.trim() == "") {
                    document.getElementById("nameMsg").innerHTML = "姓名不能不为为空！";
                    return; // 阻止代码往下运行
                }
               // 如果姓名不为空，则清空提示信息
                document.getElementById("nameMsg").innerHTML = "";
   
                if (upwd == null || upwd.trim() == "") {
                   document.getElementById("pwdMsg").innerHTML = "密码不能不为为空！";
                   return; // 阻止代码往下运行
               }


                // 提交表单
                document.getElementById("myform1").submit();
            }

    
    //第二种方法

    function  hh(){

                      var uname=document.getElementById('uname').value;
                    var upass=document.getElementById('userpass').value;

                     if(uname==null || uname.trim()==""){

                       document.getElementById('nameMsg').innerHTML="用户名不能为空";
                       return false;
                   
     }

                //如果姓名不为空,清除提示;
                document.getElementById("nameMsg").innerHTML="";

            if(upass==null || upass.trim()==""){

                document.getElementById("pwdMsg").innerHTML="密码不能为空";
                return false;
            }

            return true;

      }

    //第三种方法

          function  sub2(){

                //获取两个元素值
                var name3=document.getElementById('uname').value;
                 var upass3=document.getElementById('userpass').value;

                //比较
                if(name3==null || name3.trim()==""){

                         document.getElementById('nameMsg').innerHTML="哎,小伙用户名不能为空"
                      return false;

                }

                //如果用户输入了用户名,把提示消息去掉

                document.getElementById('nameMsg').innerHTML="";

            if(upass3==null || upass3.trim()==""){

                document.getElementById('pwdMsg').innerHTML="小伙记性不好啊,密码都没输";

                return false;

            }


            return true;

      }

</script>