关闭

js登录界面判断输入的用户名和密码是否为空

3248人阅读 评论(0) 收藏 举报
分类:
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        //检查用户名和密码是否为空
        function check(){
            var username= document.getElementById("username");
            if(username.value.trim()==""){//没有输入用户名是显示提示
                //获取所有子节点
                var findNodes = document.getElementById("name").children;
                if(findNodes.length==0){//只添加一次span
                    var appdom= document.createElement("span");
                    appdom.innerHTML="*用户名不能为空";
                    appdom.style.color="red";
                    document.getElementById("name").appendChild(appdom);
                }
                return false;
            }else{//输入了内容后清除节点内容
                var findNodes =document.getElementById("name").children;
                if(findNodes.length>0){
                    document.getElementById("name").removeChild(findNodes[0]);
                }
            }
            var userpwd = document.getElementById("userpwd");
            if(userpwd.value.trim()==""){
                var findNodes2 = document.getElementById("pwd").children;
                if(findNodes2.length==0){
                    var appdom2 = document.createElement("span");
                    appdom2.innerHTML="*密码不能为空";
                    appdom2.style.color="red";
                    document.getElementById("pwd").appendChild(appdom2);
                }
                return false;
            }else{
                var findNodes2 = document.getElementById("pwd").children;
                if(findNodes2.length>0){
                    document.getElementById("pwd").removeChild(findNodes2[0]);
                }
            }
        }
    </script>
</head>
<body>
     <form name="form1">
         用户名:<input type="text" name="username" id="username"/><em id="name"></em><br>
         密  码:<input type="password" name="userpwd" id="userpwd"><em id="pwd"></em><br>
         <input type="submit" value="登录" onclick="return check();">
     </form>


</body>
</html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3927次
    • 积分:96
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档