JS開發(fā)步驟學(xué)習(xí)筆記

發(fā)布時(shí)間：2020-07-09 20:14:04 來源：網(wǎng)絡(luò) 閱讀：266 作者：知止內(nèi)明欄目：web開發(fā)

確定事件
事件要觸發(fā)函數(shù): 定義函數(shù)
函數(shù)通常都要去做一些交互: 點(diǎn)擊, 修改圖片, 動(dòng)態(tài)修改innerHTML屬性可以編寫代碼... innerTEXT() 不能編寫代碼

表單校驗(yàn)中常用的事件:

獲得焦點(diǎn)事件: onfocus

失去焦點(diǎn)事件  onblur

按鍵抬起事件:  onkeyup

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            確認(rèn)事件
            事件觸發(fā)函數(shù)
            函數(shù)操作元素

            校驗(yàn)用戶名
                1. 當(dāng)用戶鼠標(biāo)移動(dòng)到輸入框中時(shí)候, 請(qǐng)給用戶一個(gè)提示
                    事件: 焦點(diǎn)事件 onfocus
                    觸發(fā)函數(shù)
                    函數(shù)里面要做一些事情
                        span 給用戶提示信息

                2. 當(dāng)用戶鼠標(biāo)移開時(shí)候, 校驗(yàn)一下用戶輸入
                    事件: 失去焦點(diǎn)  onblur
                    觸發(fā)函數(shù)
                    函數(shù)要干事情:
                        校驗(yàn)用戶輸入
                        得到用戶輸入的值

                3. 當(dāng)用戶按鍵輸入抬起的時(shí)候, 校驗(yàn)一下用戶輸入
        -->
        <script>

            function showTips(spanID,msg){
                var span = document.getElementById(spanID);
                span.innerHTML = msg;
            }

            function checkUsername(){

                /*
                 alert(this)  每一個(gè)函數(shù)中都隱藏著一個(gè)this指針, 指向的是當(dāng)前事件觸發(fā)對(duì)象 
                */
                var uValue = document.getElementById("username").value;
//              alert(uValue);
                var span = document.getElementById("span_username");
                if(uValue.length < 6){
                    span.innerHTML = "對(duì)不起,太短啦!"
                    return false;
                }else{
                    span.innerHTML = "恭喜您,夠用!"
                    return true;
                }
            }

            function checkForm(){
                var flag = checkUsername();
                return flag;
            }

        </script>
    </head>
    <body>
        <form action="../01-自動(dòng)輪播圖片/圖片自動(dòng)輪播.html" onsubmit="return checkForm()">
            用戶名:<input type="text" id="username" onblur="checkUsername()"  onfocus="showTips('span_username','用戶名長(zhǎng)度不能小于6位')" /><span id="span_username"></span> <br />
            <input type="submit" value="注冊(cè)" />
        </form>

    </body>
</html>

向AI問一下細(xì)節(jié)

JS開發(fā)步驟學(xué)習(xí)筆記

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽