JavaScript学习记录《二》

川长思鸟来 2024-04-03 11:25 103阅读 0赞

> JavaScript学习记录《二》

<!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
        <title>初次网</title>
    </head>
    
    <body>
    
        <table>
    
            
    
            <tr>
    
                <td>姓名：</td>
    
                <td>诗栋</td>
    
            </tr>
            
    
            <tr>
    
                <td rowspan="2">喜欢水果：</td>
    
                <td>苹果</td>
    
            </tr>
    
            
    
            <tr>
    
                <td>香蕉</td>
            </tr>
        </table>
    
        <img id="Light" scr="时钟光影.jpg" width="450" height="450" /> <br />
        
        <div class="cls">传统教育</div>       <br />
        <div class="cls">诗栋无敌</div>       <br />
    
        <input type="checkbox" name="hobby" />电影
        <input type="checkbox" name="hobby" />旅游
        <input type="checkbox" name="hobby" />游戏
        <br />
        <script>
    
            //Location:地址栏对象；属性：href
            /*
            alert("要跳转了！")
           // location.href = "http://www.baidu.com";
    
            document.write("3秒跳转到首页。。。");
            setTimeout(
                function () {
                    location.href = "http://www.baidu.com";
    
                }, 3000
            )
            */
    
            //DOM:文档对象模型：将标记语言的各个组成部分封装成对象
            /*
             * document:
             * Element:
             * Attribute:
             * Text:文本对象
             * Comment：注释对象
             * */
    
            /*
               javaScript通过DOm，就能够对HTML进行操作了
               .改变HTML元素的内容
               .改变html元素的样式（CSS）
               .对HTML DOM事件作出反应
               .添加和删除HTML元素
             */
    
            /*
             *   DOM:
             *
               1 .获取Element对象
               2 .常见HTML Element对象的使用
             */
    
            
            // 1.获取Element对象;       Element:元素对象
            
                    /*
                        .getElementById() 根据id属性值获取，返回一个Element对象
                        .getElementsByTagName()  根据标签名称获取，返回Element对象数组
                        .getElementsByName()  根据name属性值获取，返回Element对象数组
                        .getElementsByClassName() 根据class属性值获取，返回Element对象数组
                     */
    
                   // var img = document.getElementById("img");
                    //alert(img);
            var img = document.getElementById("Light");
            img.src = "周传雄.jpg";
    
            var divs = document.getElementsByTagName("div");
            /*
             * style:设置元素CSS样式
             * InnerHTML:设置元素内容
             * */
            for (let i = 0; i < divs.length; i++) {
                // divs[i].style.color = "red";
                divs[i].innerHTML = "hahahha"
                divs[i].style.color = "red";
            }
                    //alert(divs.length);
                    /*
                        for (let i = 0; i < divs.length; i++) {
                            alert(divs[i]);//[object HTMLDivElement]
                        }
                    */
    
                    var hobbys = document.getElementsByName("hobby");
                    /*
                    for (let i = 0; i < hobbys.length; i++) {
                        alert(hobbys[i]);//[object HTMLInputElement]
                    }
                    */
            var clss = document.getElementsByClassName("cls");
            /*
                    for (let i = 0; i < clss.length; i++) {
                        alert(clss[i]);//[object HTMLDivElement]
            }
            */
          //  2.常见HTML Element对象的使用
            //1-src 2-cheched设置或返回checkbox是否应被选中：checkboxObject.check=true|false;
    
            var hobbys = document.getElementsByName("hobby");
                  
            for (let i = 0; i < hobbys.length; i++) {
                //alert(hobbys[i]);//[object HTMLInputElement]
                hobbys[i].checked = true;//全选中 
                    
            }
            
    
        </script>
    </body>
    
    </html>

2022-10-11

> 2022-10-11

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表单验证</title>
    </head>
    <body>
        <div class="form-div">
            <div class="reg-content">
                <h1>
                    欢迎注册
                </h1>
                <span>已有账号？</span> <a href="#">登陆</a>
            </div>
            <form id="reg-form" action="#" method="get">
    
                <table>
    
                    <tr>
                        <td>
                            用户名
                        </td>
                        <td class="inputs">
                            <input name="username" type="text" id="username">
                            <br>
                            <span id="username_err" class="err_msg" style="display:none">
                            用户名不太受欢迎
                            </span>
                        </td>
                    </tr>
    
                    <tr>
                        <td>
                            密码
                        </td>
                        <td class="inputs">
                            <input name="password" type="password" id="password">
                            <br>
                            <span id="password_err" class="ree_msg" style="display: none">
                                密码格式有误
                            </span>
                        </td>
                    </tr>
    
                    <tr>
                        <td>手机号</td>
                        <td class="inputs"><input name="tel" type="text" id="tel">
                            <br>
                            <span id="tel_err" class="err_msg" style="display: none">
                                手机号码格式错误
                            </span>
                        </td>
                    </tr>
                </table>
    
                <div class="buttons">
                    <input value="注册" type="submit" id="reg_bin">
                </div>
                <br class="clear">
            </form>
        </div>
    
        <script>
    
            //1.验证用户名是否符合规则
            //1-1:获取用户名的输入框：
            var usernameInput=document.getElementById("username");
    
            //1-2:绑定onblur事件 失去焦点
           usernameInput.onblur=checkUsername;
           function checkUsername(){
            //1-3:获取用户输入的用户名
            var username=usernameInput.value.trim();//实现错误啊？
            //alert(username);
    
            var flag=username.length>=6&&username.length<=12;
             //1-4:判断用户名是否符合规则：长度：6-12
             if(flag){
                //符合规则
                document.getElementById("username_err").style.display='none';
             }else{
                //不符合规则
                document.getElementById("username_err").style.display='';
             }
             return flag;
           }
           
            //1.验证密码是否符合规则
            //1-1:获取密码的输入框：
            var passwordInput=document.getElementById("password");
    
            //1-2:绑定onblur事件 失去焦点
           passwordInput.onblur=checkPassword;
           function checkPassword(){
            //1-3:获取用户输入的密码
            var password=passwordInput.value.trim();//实现错误啊？
           // alert(password);
    
           var flag=password.length>=6&&password.length<=12;
             //1-4:判断密码是否符合规则：长度：6-12
             if(flag){
                //符合规则
                document.getElementById("password_err").style.display='none';
             }else{
                //不符合规则
                document.getElementById("password_err").style.display='';
             }
             return flag;
           }
    
    
    
           
            //1.验证手机号是否符合规则
            //1-1:获取手机号的输入框：
            var telInput=document.getElementById("tel");
    
            //1-2:绑定onblur事件 失去焦点
           telInput.onblur=checkTel;
           function checkTel(){
            //1-3:获取用户输入的手机号
            var tel=telInput.value.trim();//实现错误啊？
            //alert(tel);
    
            var flag=tel.length==11;
             //1-4:判断手机号是否符合规则：长度：6-12
             if(flag){
                //符合规则
                document.getElementById("tel_err").style.display='none';
             }else{
                //不符合规则
                document.getElementById("tel_err").style.display='';
             }
             return flag;
           }
    
    
    
           //1.获取表单对象
           var regForm=document.getElementById("reg-form");
    
           //2.绑定onsubmit事件
           regForm.onsubmit=function(){
            //挨个判断每一个表单项是否符合要求，如果有一个不符合，则返回false
    
            var flag=checkUsername()&&checkPassword()&&checkTel();
    
            return flag;
           }
           //运行后提交表单后：
           //file:///E:/VSCode/VS%E4%BB%A3%E7%A0%81/Untitled-1.html?
           //username=sghsghd&password=gsghdha&tel=13146789136#
        </script>
    </body>
    </html>

> 运用正则表达式后：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表单验证</title>
    </head>
    <body>
        <div class="form-div">
            <div class="reg-content">
                <h1>
                    欢迎注册
                </h1>
                <span>已有账号？</span> <a href="#">登陆</a>
            </div>
            <form id="reg-form" action="#" method="get">
    
                <table>
    
                    <tr>
                        <td>
                            用户名
                        </td>
                        <td class="inputs">
                            <input name="username" type="text" id="username">
                            <br>
                            <span id="username_err" class="err_msg" style="display:none">
                            用户名不太受欢迎
                            </span>
                        </td>
                    </tr>
    
                    <tr>
                        <td>
                            密码
                        </td>
                        <td class="inputs">
                            <input name="password" type="password" id="password">
                            <br>
                            <span id="password_err" class="ree_msg" style="display: none">
                                密码格式有误
                            </span>
                        </td>
                    </tr>
    
                    <tr>
                        <td>手机号</td>
                        <td class="inputs"><input name="tel" type="text" id="tel">
                            <br>
                            <span id="tel_err" class="err_msg" style="display: none">
                                手机号码格式错误
                            </span>
                        </td>
                    </tr>
                </table>
    
                <div class="buttons">
                    <input value="注册" type="submit" id="reg_bin">
                </div>
                <br class="clear">
            </form>
        </div>
    
        <script>
    
            //1.验证用户名是否符合规则
            //1-1:获取用户名的输入框：
            var usernameInput=document.getElementById("username");
    
            //1-2:绑定onblur事件 失去焦点
           usernameInput.onblur=checkUsername;
           function checkUsername(){
            //1-3:获取用户输入的用户名
            var username=usernameInput.value.trim();//实现错误啊？
            //alert(username);
    
            //var flag=username.length>=6&&username.length<=12;
             //1-4:判断用户名是否符合规则：长度：6-12,单词字符组成（正则表达式）
             var reg=/^\w{6,12}$/;
             reg.test(username);
             var flag= reg.test(username);
             if(flag){
                //符合规则
                document.getElementById("username_err").style.display='none';
             }else{
                //不符合规则
                document.getElementById("username_err").style.display='';
             }
             return flag;
           }
           
            //1.验证密码是否符合规则
            //1-1:获取密码的输入框：
            var passwordInput=document.getElementById("password");
    
            //1-2:绑定onblur事件 失去焦点
           passwordInput.onblur=checkPassword;
           function checkPassword(){
            //1-3:获取用户输入的密码
            var password=passwordInput.value.trim();//实现错误啊？
           // alert(password);
    
           //var flag=password.length>=6&&password.length<=12;
             //1-4:判断密码是否符合规则：长度：6-12
             var reg=/^\w{6,12}$/;
             reg.test(password);
             var flag= reg.test(password);
             if(flag){
                //符合规则
                document.getElementById("password_err").style.display='none';
             }else{
                //不符合规则
                document.getElementById("password_err").style.display='';
             }
             return flag;
           }
    
    
    
           
            //1.验证手机号是否符合规则
            //1-1:获取手机号的输入框：
            var telInput=document.getElementById("tel");
    
            //1-2:绑定onblur事件 失去焦点
           telInput.onblur=checkTel;
           function checkTel(){
            //1-3:获取用户输入的手机号
            var tel=telInput.value.trim();//实现错误啊？
            //alert(tel);
    
            //var flag=tel.length==11;
             //1-4:判断手机号是否符合规则：长度：6-12,数字组成，第一位是1
             var reg=/^[1]\d{10}$/;
             var flag=reg.test(tel);
             if(flag){
                //符合规则
                document.getElementById("tel_err").style.display='none';
             }else{
                //不符合规则
                document.getElementById("tel_err").style.display='';
             }
             return flag;
           }
    
    
    
           //1.获取表单对象
           var regForm=document.getElementById("reg-form");
    
           //2.绑定onsubmit事件
           regForm.onsubmit=function(){
            //挨个判断每一个表单项是否符合要求，如果有一个不符合，则返回false
    
            var flag=checkUsername()&&checkPassword()&&checkTel();
    
            return flag;
           }
           //运行后提交表单后：
           //file:///E:/VSCode/VS%E4%BB%A3%E7%A0%81/Untitled-1.html?
           //username=sghsghd&password=gsghdha&tel=13146789136#
        </script>
    </body>
    </html>