不用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;//返回值
            } 
    }

 

　　这样就可以进行简单的非空验证了，效果如下：

　　　　用户名为空：

　　　　　　　　　　　　　　　　

　　　　密码为空：

　　　　　　　　　　　　　　　　

　　　　

　　

 

 

　　

转载于:https://www.cnblogs.com/zxbs12345/p/7921697.html