用javascript实现用户登录验证的代码。

最新推荐文章于 2024-04-29 17:01:02 发布

马德里甜欣

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量5.3k

点赞数 2

文章标签： javascript 前端 es6 算法 leetcode

本文链接：https://blog.csdn.net/weixin_51564923/article/details/123975730

版权

几种方法，仅供参考：

	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);

function check() {
    if(document.getElementById("username").value=="") {
        alert("没有输入用户名！");
        return false;
    } else if(document.getElementById("password").value=="") {
        alert("没有输入密码！");
        return false;
    } else {
        return true;
    }
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
<body>

<form id="form1" action="" method="get">
    <input name="text1" type="text" value="" placeholder="name">
    <input type="password" name="pwd" placeholder="密码">
    <input name="text3" value="submit"  type="submit" onclick="subimtonclick()">
</form>
    <script language="JavaScript">
            function subimtonclick(){
                var form1=document.getElementById('form1');
                if(form1.text1.value==""){
                    alert("用户名不能为空");
                    form1.text1.focus();
                    return;
                }
                if(form1.text1.value.length<6 || form1.text1.value.length>10){
                    alert("用户名不能少于六个字符，不能超过十个字符");
                    form1.text1.focus();
                    return;
                }

                if(form1.pwd.value==""){
                    alert("密码不能为空");
                    form1.pwd.focus();
                    return;
                }
                if(form1.pwd.value.length<6 || form1.pwd.value.length>10){
                    alert("密码不能少于六个字符，不能超过十个字符");
                    form1.pwd.focus();
                    return;
                }
                var str="用户名："+form1.text1.value+"<br>"+
                        "密码："+form1.pwd.value+"<br>";
                document.writeln(str);
            }
</script>
</body>
</html>

马德里甜欣

关注

2
点赞
踩
35

收藏

觉得还不错? 一键收藏
1
评论
用javascript实现用户登录验证的代码。

几种方法，仅供参考： var getCheckObject = function() { var tipP = tip = document.createElement("p"); tip.appendChild(document.createTextNode("密码错误")); var tipU = tip = document.createElement("p"); tip.appendChild(document.createTextNode("用户名错误"));.
复制链接

扫一扫