js做简单的登录页面以及附加条件，登录成功后跳转

初得不能再初的初学者

已于 2022-12-01 19:48:06 修改

阅读量5.5k

点赞数 4

分类专栏： js 文章标签： js

于 2022-12-01 19:42:20 首次发布

本文链接：https://blog.csdn.net/m0_63100025/article/details/128137452

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

新手第一次上传，还不会介绍，很简单，能看懂不难的

<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>制作注册验证</title>
	<link href="css/reg.css" rel="stylesheet">
</head>

<body>
	<div class="main"><img src="images/top.jpg" alt="top" />
		<form  method="post" id="myform" action="success.html">
			<dl>
				<dt class="left">用户名：</dt>
				<dd><input id="user" type="text" class="inputs" onblur="checkUser()" onfocus="showUser()" />
					<div id="user_prompt" class="prompt"></div>
				</dd>
			</dl>
			<dl>
				<dt class="left">密码：</dt>
				<dd><input id="pwd" type="password" class="inputs" onblur="checkPwd()" onfocus="showPwd()" />
					<div id="pwd_prompt" class="prompt"></div>
				</dd>
			</dl>
			<dl>
				<dt class="left">&nbsp;</dt>
				<dd><input name="" type="image" src="images/sumbit_btn.jpg" /></dd>
			</dl>
		</form>
	</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
	$(document).ready(function(){
		$("#myform").submit(function(){
	var flag = true;
				if (!checkuser()) flag = false;
				if (!checkpwd()) flag = false;
                return flag;
})
            $("#fuser").blur(checkuser);
			$("#pwd").blur(checpwd);
			
	})

			function checkuser() {
			var $user = $("#user");
			var $divID = $("#user_prompt");
			$divID.html("");
			if ($user.val() == "") {
				$divID.html("名字不能为空");
				return false;
			}
			for (var i = 0; i < $user.val().length; i++) {
				var j = $user.val().substring(i, i + 1)
				if (j >= 0) {
					$divID.html("姓名中不能包含数字");
					return false;
				}
			}
			return true;
		}
		function checkpwd() {
			var $pwd = $("#pwd");
			var $divID = $("#pwd_prompt");
			$divID.html("");
			if ($pwd.val() == "") {
				$divID.html("密码不能为空");
				return false;
			}
			if ($pwd.val().length < 6) {
				$divID.html("密码必须等于或大于6个字符");
				return false;
			}
			return true;
		}
</script>
</body>

</html>

成功后跳转页面代码就更简单了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=deng, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    登录成功！
</body>

</html>