用JS实现简单的登录账号密码判断跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div>
<span>用户名:</span>
<input type="text" placeholder="请输入用户名..." id="username">
<span>密码:</span>
<input type="password" placeholder="请输入用户名..." id="passwd">
<input type="button" value="登录" onclick="login()">
<input type="button" id="btnClear" value="清除" onclick="doClear()" />
</div>
<script type="text/javascript">
let accountAll = [{ // 存储账户json数据的数组
username: 123,
passwd: 'qwe'
},
{
username: 456,
passwd: 'asd'
},
{
username: 789,
passwd: 'zxc'
}
]
function login() { //登陆判断
let username = document.getElementById('username').value;
let passwd = document.getElementById('passwd').value;
let account = accountAll.filter(function(e) {
return e.username == username
})[0]; // 筛选账号返回数组，不存在则返回空数组
if (!account) {
alert('账户不存在');
} else {
if (account.username == username && account.passwd == passwd) {
alert('登陆成功');
} else {
alert('密码错误');
}
}
}
function doClear() { //获取页面所有的input框，是text和password框，内容=空串
let inputs = document.getElementsByTagName("input");
for (let i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'text' || inputs[i].type == 'password') {
inputs[i].value = '';
}
}
}
//给清除按钮增加onclick事件
let btnClear = document.getElementById('btnClear');
btnClear.addEventListener('click', function() {
doClear();
});
</script>
</body>
</html>
以上就是速优网络和大家分享的"用JS实现简单的登录账号密码判断跳转",非常感谢您有耐心的读完这篇文章，我们将为您提供更多参考使用或学习交流的信息。我们还可为您提供：企业网站建设、网站仿制、网站复制、仿站、外贸网站建设、外贸建站、公司官网制作等服务，本公司以“诚信、专业、务实、创新”的服务理念服务于客户。如您需要合作，请扫码咨询，我们将诚挚为您服务。
TAG标签：
