如何确保用户名和密码与特定值匹配，登录按钮重定向到index.html
我相信onclick函数处理它。但是在下面的代码中添加它的方式和位置。请指导。谢谢。
我相信onclick函数处理它。但是在下面的代码中添加它的方式和位置。请指导。谢谢。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login V9</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--==============-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--==============-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--==========================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--==============-->
<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<!--================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--==============-->
<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--==============-->
<link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
<!--==============-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--=============-->
<link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
<!--===============-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============-->
</head>
<body>
<div class="container-login100" style="background-image: url('images/bg-01.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-80 p-b-30">
<form class="login100-form validate-form">
<span class="login100-form-title p-b-37">
App 20
</span>
<div class="wrap-input100 validate-input m-b-20" data-validate="Enter username or email">
<input class="input100" type="text" name="username" placeholder="username or email">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-25" data-validate = "Enter password">
<input class="input100" type="password" name="pass" placeholder="password">
<span class="focus-input100"></span>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn">
Sign In
</button>
</div>
<div class="text-center p-t-57 p-b-20">
<span class="txt1">
Or login with
</span>
</div>
<div class="flex-c p-b-112">
<a href="#" class="login100-social-item">
<i class="fa fa-facebook-f"></i>
</a>
<a href="#" class="login100-social-item">
<img src="images/icons/icon-google.png" alt="GOOGLE">
</a>
</div>
<div class="text-center">
<a href="#" class="txt2 hov1">
Sign Up
</a>
</div>
</form>
</div>
</div>
<div id="dropDownSelect1"></div>
<!--==============-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--=============-->
<script src="vendor/animsition/js/animsition.min.js"></script>
<!--==============-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--==============-->
<script src="vendor/select2/select2.min.js"></script>
<!--===========-->
<script src="vendor/daterangepicker/moment.min.js"></script>
<script src="vendor/daterangepicker/daterangepicker.js"></script>
<!--===============-->
<script src="vendor/countdowntime/countdowntime.js"></script>
<!--==================-->
<script src="js/main.js"></script>
</body>
</html>这取决于你。如果这只是一个有趣的网站，您可以在链接的另一个js文件中进行验证客户端，或者您可以将脚本放在<script></script>标记内。但是，检查明文密码是一个可怕的想法，在任何情况下都不应该用于任何公开密码。使用此路由的最简单方法是仅针对地图检查用户名和密码。
更好的解决方案是在Go webserver或PHP或node.js上运行此应用程序，或者运行什么。在这种情况下，您需要正确地散列并加密密码并安全地存储它们。当客户端尝试登录时，将对其密码服务器端的散列和加盐版本进行检查，客户端将收到回复，指示成功或失败，并可能设置会话cookie。关于这个过程有很多文章，我相信这个问题会有更详细的答案。
你可以用不同的方式做到这一点。一种方法是使用表格。您可以在表单标记中指定操作，表单将使用该请求将输入字段中的所有数据发送到输入字段。该数据采用请求体的形式。您可以编写处理函数来将数据验证为javascript。
您应该只在表单标记中保留一个按钮，因为默认情况下所有按钮的形式都是type =“submit”。或者你必须指定其他按钮type =“button”。
这就是我建议的方式。
<form action="/validateUserNameAndPassword">
<div class="wrap-input100 validate-input m-b-20" data-validate="Enter username or email">
<input class="input100" type="text" name="username" placeholder="username or email">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-25" data-validate="Enter password">
<input class="input100" type="password" name="pass" placeholder="password">
<span class="focus-input100"></span>
</div>
<div class="container-login100-form-btn">
<button type="submit" class="login100-form-btn">
Sign In
</button>
</div>
</form>