不用alert提示的非空表單驗證

　　在做表單的非空驗證時，可以用alert()輸出提示框來給用戶相應的提示。但是，這樣的用戶體驗不佳。可以通過添加元素來改變提示的樣式，

　　　　首先做一個簡單的用戶名登錄界面，

<form id="testform" action="1025.html">
        <label id="label1" for="test_txt">用戶名：</label>
        <input type="text" id="test_txt"><br id="br1"/>
        <label id="label2" for="test_pass">密碼&nbsp;&nbsp;&nbsp;：</label>
        <input type="password" id="test_pass"><br id="br2"/>
        <input type="submit" id="test_btn" value="提交" onClick="return yanZheng()">
</form>

效果如下：

　　　　　　　　　　　　　　　　

創建函數如下：

    function yanZheng()
    {
        var text = document.getElementById("test_txt");
        var btn = document.getElementById("test_btn");
        var form = document.getElementById("testform");
        var br1 = document.getElementById("br1");
        var pass = document.getElementById("test_pass");
        var br2 = document.getElementById("br2");
        
        if(text.value.trim()=="")//為空並且去除空格
        {
            var label1 =document.createElement("label");//添加一個label元素來承載提示字符
            label1.setAttribute("for","test_txt");//給添加label元素指定關聯的表單元素
            form.insertBefore(label1,br1);//把添加的元素放到指定位置，form代表父級，label1是要添加的子節點，br1表示被添加的節點（添加在其前面）
            text.labels[1].innerHTML = "請輸入用戶名" ;//指定添加元素的內容，因為有兩個label，所以新添加序號的為1
            text.labels[1].setAttribute("style","font-size:9px;color:red");//給內容添加樣式
            return false;//返回值
        }
        else if(pass.value.trim()=="")//為空並且去除空格
            {
                
                var label2 =document.createElement("label");//添加一個label元素來承載提示字符
                label2.setAttribute("for","test_pass");//給添加label元素指定關聯的表單
                form.insertBefore(label2,br2);//把添加的元素放到指定位置，form代表父級，label2是要添加的子節點，br2示被添加的節點（添加在其前面）
                pass.labels[1].innerHTML = "請輸入密碼" ;//指定添加元素的內容，因為有兩個label，所以新添加
                pass.labels[1].setAttribute("style","font-size:9px;color:red");//給內容添加樣式
                
                return false;//返回值
            }
            else
            {
                
                return true;//返回值
            } 
    }

 

　　這樣就可以進行簡單的非空驗證了，效果如下：

　　　　用戶名為空：

　　　　　　　　　　　　　　　　

　　　　密碼為空：