表單校驗+事件

阿新 • • 發佈：2020-07-06

表單校驗：

　　技術分析：

　　　　確定事件：表單提交時 onsubmit

　　　　　　　　　文字框失去焦點時 onblur

　　　　編寫元素

　　　　獲取元素

　　　　　　document.getElementById("id值")

　　　　操作元素（獲取元素值，操作標籤體，操作標籤的value屬性）

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        使用者名稱 
<input name="" value="tom" id="username" onfocus="getFocus()" onblur="loseFocus()"/><br />
        <span id="spanid"></span>
    </body>
</html>
<script>
    //得到焦點
    function getFocus(){
        //獲取元素
        var user = document.getElementById("username");
         
//alert(user.value);
        
        //給span填寫文字框內容
        document.getElementById("spanid").innerHTML = user.value;
    }
    //時去焦點的時候將內容彈出
    function loseFocus(){
        //獲取元素
        var user = document.getElementById("username");
        alert(user.value);
        document.getElementById("spanid" 
).innerHTML = null;
    }
</script>

焦點事件

　　步驟分析：

　　　　1.編寫表單

<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="#" method="get" onsubmit="return checkForm()">
            <table width="60%" height="60%"  align="center" bgcolor="#ffffff">
                <tr>
                    <td colspan="3">會員註冊</td>
                </tr>
                <tr>
                    <td width="20%">使用者名稱:</td>
                    <td width="40%"><input type="text" name="username" id="username" onblur="loseFocus(this.value)"></td>
                    <td width="40%"><span id="username_msg"></span></td>
                </tr>
                <tr>
                    <td>密碼:</td>
                    <td><input type="password" name="password" id="password"></td>
                    <td><span id="password_msg"></span></td>
                </tr>
                <tr>
                    <td>確認密碼:</td>
                    <td><input type="password" name="repassword" id="repassword"></td>
                    <td><span id="repassword_msg"></span></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" name="email" id="email"></td>
                    <td><span id="email_msg"></span></td>
                </tr>
                <tr>
                    <td>姓名:</td>
                    <td><input type="text" name="name"></td>
                </tr>
                <tr>
                    <td>性別:</td>
                    <td>
                        <input type="radio" name="sex" value="男"> 男
                        <input type="radio" name="sex" value="女" />女
                    </td>
                </tr>
                <tr>
                    <td>出生日期</td>
                    <td>
                        <input type="text" name="birthday">

                    </td>
                </tr>
                <tr>
                    <td>驗證碼</td>
                    <td>
                        <input type="text" name="checkcode">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="註冊" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

表單

　　　　2.表單提交時，確定事件 onsubmit()

　　　　3.校驗使用者名稱和密碼

　　　　4.獲取使用者名稱和密碼的物件及值

　　　　5.判斷內容，當為空時，獲取相應的span元素

　　　　　　往span元素中顯示錯誤資訊

<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script>
        function getFocus(){
            var flag = true;
            //1.獲取使用者名稱和密碼的value值
            var user = document.getElementById("username").value;
            var pass = document.getElementById("password").value;
            
            //校驗使用者名稱
            if(user==null || user == ""){
                //若為空，在span中新增錯誤資訊
                //獲取span，設定錯誤資訊
                document.getElementById("username_msg").innerHTML="<font color='red'>使用者名稱不為空</font>"
                flag = false;
            }else{
                //
                document.getElementById("username_msg").innerHTML="";
            }
            
            //校驗密碼
            if(pass==null || pass == ""){
                //若為空，在span中新增錯誤資訊
                //獲取span，設定錯誤資訊
                document.getElementById("password_msg").innerHTML="<font color='red'>密碼不為空</font>"
                //若不滿足，則flag=false
                flag = false;
            }else{
                document.getElementById("password_msg").innerHTML="";
            }
            return flag;
        }
        //方式1
        /*function loseFocus(){
            //獲取username的value值
            var user = document.getElementById("username").value;
            //判斷條件，若不滿足，給出相應的span設定內容
            if(user==null || user == ""){
                document.getElementById("username_msg").innerHTML="<font color='red'>使用者名稱不為空</font>"
            }else{
                document.getElementById("username_msg").innerHTML="";
            }
        }*/ 
        //方式2
        function loseFocus(obj){
            var pass = obj;
            if(pass==null || pass == ""){
                document.getElementById("password_msg").innerHTML="<font color='red'>使用者名稱不為空</font>"
            }else{
                document.getElementById("password_msg").innerHTML="";
            }
        }
    </script>
    <body>
        <form action="#" method="get" onsubmit="return getFocus()">
            <table width="60%" height="60%"  align="center" bgcolor="#ffffff">
                <tr>
                    <td colspan="3">會員註冊USER REGISTER</td>
                </tr>
                <tr>
                    <td width="20%">使用者名稱:</td>
                    <td width="40%"><input type="text" name="username" id="username" onblur="loseFocus()"></td>
                    <td width="40%"><span id="username_msg"></span></td>
                </tr>
                <tr>
                    <td>密碼:</td>
                    <td><input type="password" name="password" id="password" onblur="loseFocus(this.value)"></td>
                    <td><span id="password_msg"></span></td>
                </tr>
                <tr>
                    <td>確認密碼:</td>
                    <td><input type="password" name="repassword" id="repassword"></td>
                    <td><span id="repassword_msg"></span></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" name="email" id="email"></td>
                    <td><span id="email_msg"></span></td>
                </tr>
                <tr>
                    <td>姓名:</td>
                    <td><input type="text" name="name"></td>
                </tr>
                <tr>
                    <td>性別:</td>
                    <td>
                        <input type="radio" name="sex" value="男"> 男
                        <input type="radio" name="sex" value="女" />女
                    </td>
                </tr>
                <tr>
                    <td>出生日期</td>
                    <td>
                        <input type="text" name="birthday">

                    </td>
                </tr>
                <tr>
                    <td>驗證碼</td>
                    <td>
                        <input type="text" name="checkcode">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="註冊" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

注意：

　　　在方法中 (function()) this 指代的是當前的元素（當前dom物件）

事件總結：

　　常見事件：

　　　　焦點事件

　　　　　　onfocus

　　　　　　onblur

　　　　表單事件

　　　　　　onsubmit

　　　　　　onchange 改變

　　　　頁面載入事件：

　　　　　　onload

　　　　滑鼠事件（掌握）

　　　　　　onclick

　　　　滑鼠事件（瞭解）

　　　　　　ondblclick:雙擊

　　　　　　onmousedown:按下

　　　　　　onmouseup:彈起

　　　　　　onmousemove:移動

　　　　　　onmouseover：懸停

　　　　　　onmouseout:移出

　　　　鍵盤事件(理解)

　　　　　　onkeydown：按下

　　　　　　onkeyup：彈起

　　　　　　onkeypress:按住

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">
        #e02, #e022 {
            border: 1px solid #000000;
              height: 200px;
             width: 200px;
        }
        
    </style>
    <script type="text/javascript">
        //頁面解除安裝前
        window.onbeforeunload = function(){
            return "在玩一會吧？";
        }
        
        // 頁面載入事件：當整個html頁面載入成功呼叫
        window.onload = function(){
            // 文字框事件
            var e01 = document.getElementById("e01");
            e01.onfocus = function(){
                html("textMsg","文字框獲得焦點：focus");
            }
            e01.onblur = function(){
                html("textMsg","文字框失去焦點：blur");
            }
            e01.onkeydown = function(){
                html("textMsg","鍵盤按下：keydown；");
            }
            e01.onkeypress = function(event){
                var event = event || window.event;
                append("textMsg","鍵盤按：keypress ("+ String.fromCharCode(event.keyCode)+")；");
            }
            e01.onkeyup = function(){
                append("textMsg","鍵盤彈起：keyup；");
            }
            
            // 滑鼠事件
            var e02 = document.getElementById("e02");
            e02.onmouseover = function(){
                html("divMsg","滑鼠移上：mouseover");
            }
            e02.onmouseout = function(){
                html("divMsg","滑鼠移出：mouseout");
            }
            e02.onmousedown = function(){
                html("divMsg","滑鼠按下：mousedown");
            }
            e02.onmouseup = function(){
                html("divMsg","滑鼠彈起：mouseup");
            }
            
            var e022 = document.getElementById("e022");
            e022.onmousemove = function(){
                var event = event || window.event;
            };
            
            
            // 按鈕事件
            var e03 = document.getElementById("e03");
            e03.onclick = function () {
                html("buttonMsg","單擊：click");
            };
            e03.ondblclick= function () {
                html("buttonMsg","雙擊：dblclick");
            };
            
        };
        
        /**
         * 指定位置顯示指定資訊
         * @param objId ，元素的id屬性值
         * @param  text，需要顯示文字資訊
         */
        function html(objId,text){
            document.getElementById(objId).innerHTML = text;
        }
        /**
         * 指定位置追加指定資訊
         * @param objId ，元素的id屬性值
         * @param  text，需要顯示文字資訊
         */
        function append(objId,text){
            document.getElementById(objId).innerHTML += text;
        }
        
    </script>
    
</head>
<body>
    <input id="e01" type="text" /><span id="textMsg"></span>
    <hr/>
    <div id="e02" ></div><span id="divMsg"></span>
    <hr/>
    <div id="e022" ></div><span id="divMsg2"></span>
    <hr/>
    <input id="e03" type="button" value="可以點選"/><span id="buttonMsg"></span>
</body>
</html>