html输入框，js接收到信息进入页面
我有一个重要的页面不想对所有人都公开，想做一个html单页面，内容是一个会员账号与姓名输入框，一个确认键，一个重置键。js里面可以填写多个会员账号与姓名，如果html输入的姓名与账号与js一致，就能显示我那个重要的页面，如果输入的信息不一致就弹出一个窗口显示错误提示。能否实现
<!--
* @Author: your name
* @Date: 2021-12-30 16:59:23
* @LastEditTime: 2022-02-15 17:05:47
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /未命名文件夹/123.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Generator" content="EditPlus®" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>Document</title>
<style type="text/css" rel="stylesheet">
.wrap {
margin: 0 auto;
width: 400px;
}
</style>
</head>
<body>
<div class="wrap">
<h1>登录系统</h1>
<fieldset>
<form method="get">
<p>姓 名: <input type="text" name="name" id="name" /></p>
<p>密 码: <input type="password" name="name" id="password" /></p>
<button id="sub" type="button">登录</button> <button type="reset">重置</button>
</form>
</fieldset>
</div>
</body>
<script>
var names = [
{
name: "小明",
password: "123",
},
{
name: "小红",
password: "123",
},
{
name: "小刚",
password: "123",
},
];
document.querySelector("#sub").onclick = function () {
let name = document.querySelector("#name").value;
let password = document.querySelector("#password").value;
let isUser = names.filter((item) => {
return item.name == name;
});
console.log(isUser);
if (isUser.length > 0) {
if (isUser[0].password == password) {
window.location.href = "http://baidu.com";
} else {
alert("登陆失败");
}
} else {
alert("请输入正确的用户名!");
}
};
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<label>会员账号</label>
<input type="text" id="account">
</div>
<div>
<label>姓名</label>
<input type="text" id="userName">
</div>
<div>
<input id="reset" type="button" value="重置">
<input id="submit" type="button" value="确认">
</div>
<div id="hideArea" style="display: none">隐藏区域</div>
<script>
// 保存会员账号和姓名键值对
let userMap = {
'111': '222',
'admin': '管理员',
}
let account = document.getElementById('account')
let userName = document.getElementById('userName')
document.getElementById('reset').onclick = () => {
account.value = ''
userName.value = ''
}
document.getElementById('submit').onclick = () => {
if (userMap[account.value] === userName.value) {
document.getElementById('hideArea').style.display = 'block'
window.location.href = 'https://www.baidu.com'
} else {
alert('请输入正确的会员账号和名称')
}
}
</script>
</body>
</html>
可以实现的，js用数组存储你的多个账号，然后账号文本框和姓名文本框分别输入数据，点击确认时触发click事件，创建一个js函数，用触发的这个函数来判断账号是否一致，一致跳转页面，不一致返回false不跳转
不与后端做交互权限判断，只在前端自行做判断处理？
写死在js里不太安全，但只说你的需求的话很简单实现，判断一下姓名与账号是否一致，一致就跳去你那个页面，不一致弹窗
可以，实现的方法很多。原生js只需要获取到会员账号与姓名输入框的值，在点击确定键的时候，js里面判断是否填的值是否存在即可。这个功能很简单。
可以实现 啊 获取 input 值和 你保存的账号 对比一下 用户对比一下就行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<input id="account" type="text" name="account" placeholder="请输入账号">
<input id="username" type="text" name="username" placeholder="请输入姓名">
<button type="button" onclick="handleSubmit()">确认</button>
<button type="reset">重置</button>
</form>
<script>
var accountList = [
{ account: 001, username: '张三' },
{ account: 002, username: '李四' },
{ account: 003, username: '王五' },
{ account: 004, username: '赵六' }
]
function handleSubmit() {
var account = document.getElementById('account').value // 账号
var username = document.getElementById('username').value // 姓名
if (!account) return alert('请输入账号')
if (!username) return alert('请输入姓名')
// 查找账号
accountList.some(function(item) {
// 账号存在
if (item.account == account) {
// 姓名相同
if (item.username == username) {
window.location.href = 'https://www.csdn.net'
} else {
alert('用户不存在')
}
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=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
会员账号：<input type="text" name="username" id="username">
姓名：<input type="text" name="name" id="name">
<button type="button" onclick="login()">确认</button>
<button type="button" onclick="reset()">重置</button>
</div>
</body>
<script>
let username=document.getElementById("username");
let name=document.getElementById("name");
let userArr=[{username:"admin",name:"121314"},{username:"liming",name:"123456"}];
function login(){
if(username.value!="" && name.value!=""){
userArr.map((item)=>{
if(item.username==username.value){
if(item.name==name.value){
//跳转到你想要的页面
//window.Location.herf=""
}
}
})
}else{
alert("请输入会员账号或姓名！")
}
};
function reset(){
username.value='';
name.value='';
}
</script>
</html>