JS開發(fā)步驟學習筆記

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

表單校驗中常用的事件:

成都創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設公司,專注網(wǎng)站建設、網(wǎng)站設計,有關成都定制網(wǎng)頁設計方案、改版、費用等問題,行業(yè)涉及橡塑保溫等多個領域,已為上千家企業(yè)服務,得到了客戶的尊重與認可。

獲得焦點事件: onfocus

失去焦點事件  onblur

按鍵抬起事件:  onkeyup
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            確認事件
            事件觸發(fā)函數(shù)
            函數(shù)操作元素

            校驗用戶名
                1. 當用戶鼠標移動到輸入框中時候, 請給用戶一個提示
                    事件: 焦點事件 onfocus
                    觸發(fā)函數(shù)
                    函數(shù)里面要做一些事情
                        span 給用戶提示信息

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

                3. 當用戶按鍵輸入抬起的時候, 校驗一下用戶輸入
        -->
        <script>

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

            function checkUsername(){

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

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

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

    </body>
</html>

分享名稱:JS開發(fā)步驟學習筆記
網(wǎng)頁網(wǎng)址:http://bm7419.com/article26/jdghjg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供移動網(wǎng)站建設網(wǎng)站維護、網(wǎng)站導航電子商務、標簽優(yōu)化、網(wǎng)站設計

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都app開發(fā)公司