Javascript 如何基于输入值创建新用户

我有一个问题，这对我这个初学者来说太难了。你能帮帮我吗。我知道用javascript创建这个有点奇怪，但这只是我自己的项目，我不会在网上发布任何东西。但是我需要通过使用纯香草Javascript来解决这个问题，我有 在.js上显示的用户和我有一个页面，我需要创建一个新用户，可以像其他两个（管理员和来宾）一样登录，我需要另一个来宾用户，并根据输入值创建…提前感谢，我仍在学习，并将感谢您的评论

var el=document.getElementById（“登录”）；
如果（el）{
el.addEventListener（“点击”，状态）；
}
函数状态（）{
var username=document.getElementById（“用户名”）.value；
var password=document.getElementById（“密码”）.value；
如果（用户名==“管理员”&&password==“管理员”）{
sessionStorage.setItem（“isAdmin”、“yes”）；
警报（“您以管理员身份登录！”）；
window.location.href=“../index.html”；
}else if（用户名==“guest”&&password==“guest”）{
sessionStorage.setItem（“isAdmin”、“no”）；
警报（“您以来宾身份登录！”）；
window.location.href=“../index.html”；
}否则{
警报（“用户名或密码不正确，请重试！”）
}
}

莫夫布兰克









用户名

密码

重复密码

职能（管理员/客人）

尝试创建一个有效用户数组，而不是使用if-else语句来检查每个单独的用户（不能适应其他用户）

然后，当您想要创建一个新用户时，推送到该数组。使用以下内容验证登录：

function state() {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  const foundUser = users.find(user => user.username === username && user.password === password);
  if (!foundUser) {
    console.log('Invalid user!');
  } else {
    // Log the user in
  }
}

---

问题是，您当前的代码验证了一个用户登录尝试（没有相应的按钮），该尝试不能（或不应该）与用于注册的表单相同，至少在没有明显改变的情况下是如此。

尝试创建一个有效用户数组，而不是使用if-else语句来检查每个单独的用户（不能适应其他用户）

然后，当您想要创建一个新用户时，推送到该数组。使用以下内容验证登录：

function state() {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  const foundUser = users.find(user => user.username === username && user.password === password);
  if (!foundUser) {
    console.log('Invalid user!');
  } else {
    // Log the user in
  }
}

---

问题是，您当前的代码验证用户登录尝试（没有按钮），该尝试不能（或不应该）与用于注册的表单相同，至少在没有明显改变的情况下是如此。

我制作了一个工作示例，请参见下文。该示例仅用于测试/学习目的。我建议您使用http请求验证用户和密码，并防止sql注入

PS：这里是JSFIDLE：

PS2：您可以使用sweet alert而不是alert：

//添加事件处理程序
document.querySelector（“#createuser”）.onclick=create\u user；
document.querySelector（“#validateuser”）.onclick=validate_user；
函数create_user（）
{
//为用户名和密码分配值
var username=document.querySelector（“#txt_user”）.value；
var password=document.querySelector（“#txt_password”）.value；
//使用sessionstorage保留用户和密码值
setItem（“用户名”，用户名）；
setItem（“密码”，password）；
警报（“已创建新用户”）；
}
函数validate_user（）
{
//获取以前记录的用户名和密码
var recorded_username=sessionStorage.getItem（“用户名”）；
var recorded_password=sessionStorage.getItem（“密码”）；
//为用户名和密码分配值
var username=document.querySelector（“#txt_user”）.value；
var password=document.querySelector（“#txt_password”）.value；
//做到尽可能简单，根本没有过滤器（修剪，小写）
如果（用户名==记录的用户名和密码==记录的密码）
{alert（'用户和密码有效'）；}
其他的
{alert（'validation error'）；}
}

我做了一个有效的例子，见下文。该示例仅用于测试/学习目的。我建议您使用http请求验证用户和密码，并防止sql注入

PS：这里是JSFIDLE：

PS2：您可以使用sweet alert而不是alert：

//添加事件处理程序
document.querySelector（“#createuser”）.onclick=create\u user；
document.querySelector（“#validateuser”）.onclick=validate_user；
函数create_user（）
{
//为用户名和密码分配值
var username=document.querySelector（“#txt_user”）.value；
var password=document.querySelector（“#txt_password”）.value；
//使用sessionstorage保留用户和密码值
setItem（“用户名”，用户名）；
setItem（“密码”，password）；
警报（“已创建新用户”）；
}
函数validate_user（）
{
//获取以前记录的用户名和密码
var recorded_username=sessionStorage.getItem（“用户名”）；
var recorded_password=sessionStorage.getItem（“密码”）；
//为用户名和密码分配值
var username=document.querySelector（“#txt_user”）.value；
var password=document.querySelector（“#txt_password”）.value；
//做到尽可能简单，根本没有过滤器（修剪，小写）
如果（用户名==记录的用户名和密码==记录的密码）
{alert（'用户和密码有效'）；}
其他的
{alert（'validation error'）；}
}

您可以保存两个数据：value和key，因此在代码中添加此函数

function saveData() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if(!sessionStorage.getItem(username) == username) {
       sessionStorage.setItem(username, password);
  }else {
   alert(username + "already registered");

 }
}

更新此

<input type="text" name="username" required id="username">
<p>Password</p>
<input type="password" name="password" required id="password">
<p>Repeat Password</p>
<input type="password" name="password" required>
<p>Function(admin/guest)</p>
<input type="text" name="function" required>
<a id="adduser" href="#" onclick="saveData();">Add User</a>

密码

重复密码

职能（管理员/客人）

---

这就是逻辑，我希望我已经帮了你

你可以保存两个数据：value和key，所以添加这个函数

<input type="text" name="username" required id="username">
<p>Password</p>
<input type="password" name="password" required id="password">
<p>Repeat Password</p>
<input type="password" name="password" required>
<p>Function(admin/guest)</p>
<input type="text" name="function" required>
<a id="adduser" href="#" onclick="saveData();">Add User</a>