用javascript实现简单的用户登录验证

简单清晰明了版本

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Document</title>
</head>
<body>
     <script type="text/javascript">
         function check() {
             if(document.getElementById("username").value=="") {
                 alert("没有输入用户名！");
                 return false;
             } else if(document.getElementById("password").value=="") {
                 alert("没有输入密码！");
                 return false;
             } else {
                 alert("提交成功！")
                 return true;
             }
         }
     </script>
     <form name="form1">
     <input type="text" id="username">
     <input type="password" id="password" >
     <input type="submit" onclick="check()">
     </form>    
</body>
</html>

以下是牛客网鲁鲁写的代码，很好，向他学习

链接：https://www.nowcoder.com/questionTerminal/f904c482f21346a6a19efd5a82655518
来源：牛客网

var getCheckObject = function() {
        var tipP = tip = document.createElement("p");
        tip.appendChild(document.createTextNode("密码错误"));
        var tipU = tip = document.createElement("p");
        tip.appendChild(document.createTextNode("用户名错误"));
 
        function addErrorTip(node, type) {
            node.className +=' ' + 'error' +' ';
            if(type =="username") {
                node.parentNode.appendChild(tipU); 
            } else if (type == "password") {
                node.parentNode.appendChild(tipP);
            }
             
        }
 
        function removeErrorTip(node, type) {
            node.className = "";               
            if(type ==="username") {                   
                node.parentNode.removeChild(tipU); 
            } else if (type === "password") {
                node.parentNode.removeChild(tipP);
            }
        }
 
        function isValidName(name) {
            return false;
        }
 
        function isValidPassword(password) {
            var lenIsEnough = password.length > 6; //密码长度大于6
            var hasDigital = /{d}+/.test(password); //密码包含数字
            var hasCharater = /{w}+/.test(password); //密码包含其它字符        
            return lenIsEnough && hasDigital && hasCharater;
        }
        return {
            addErrorTip: addErrorTip,
            removeErrorTip: removeErrorTip,
            isValidName: isValidName,
            isValidPassword: isValidPassword
        };
    };
     
    var checkObj = getCheckObject();
    var form = document.forms['login-form'];
    var username = form['username'];//--name是关键字
    var password = form['password'];       
    form.addEventListener('submit', function(event){               
        if(!checkObj.isValidName(username.value)) {
            checkObj.addErrorTip(username,'username');
            event.preventDefault();    
        }
        if(!checkObj.isValidPassword(password.value)) {
            checkObj.addErrorTip(password,'password');                             
            event.preventDefault();
        }
    }, false);
 
    form.addEventListener('reset',function(event){
        checkObj.removeErrorTip(username,'username');
        checkObj.removeErrorTip(password,'password');
    },false);
 
    username.addEventListener('blur', function(event) {
        if (!checkObj.isValidName(username.value)) {
            checkObj.addErrorTip(username, 'username');
        }
    }, false)
    username.addEventListener('focus', function(event) {
        checkObj.removeErrorTip(username, 'username');
    }, false);
    password.addEventListener('blur', function(event) {
        if (!checkObj.isValidPassword(password.value)) {
            checkObj.addErrorTip(password, 'password');
        }
    }, false)
    password.addEventListener('focus', function(event) {
        checkObj.removeErrorTip(password, 'password');
    }, false);

用javascript实现简单的用户登录验证

猜你喜欢