从 jQuery 中的现有电子邮件和密码数组中验证电子邮件和密码

Posted 2023-05-09

技术标签:

【中文标题】从 jQuery 中的现有电子邮件和密码数组中验证电子邮件和密码【英文标题】：Validate email and password from an array of existing emails and passowrds in jQuery 【发布时间】：2020-06-17 18:30:32 【问题描述】：

我有两个数组 emails 和 passwords（尽管您可能会看到更多），我想在登录期间使用它们来对用户进行身份验证。这是一种实践问题不是要在行业中实施的东西。见下文：

其他数组 checkEmails 和 checkPasswords 在这里没有用处，但它们可以作为即使失败登录的存储空间。在代码上，我有一个条件，即仅使用预定的电子邮件和密码进行身份验证。见下文：

$("#myForm").submit(function(e) 
  e.preventDefault();
  if ($("#inputEmail").val() != '' && $("#inputPassword").val() != '') 
    if ($("#inputEmail").val() == 'quis@google.com' && $("#inputPassword").val() == 'quis') 
      window.location.href = './database.html';
     else 
      alert('invalid username password');
    
   else 
    alert('username or password cann\'t be blank');
  
);

但现在我希望身份验证通过 emails 和 passwords 数组进行搜索。这是参考的整个userscripts.js文件。

$("#myForm").submit(function(e) 
  e.preventDefault();
  if ($("#inputEmail").val() != '' && $("#inputPassword").val() != '') 
    if ($("#inputEmail").val() == 'quis@google.com' && $("#inputPassword").val() == 'quis') 
      window.location.href = './database.html';
     else 
      alert('invalid username password');
    
   else 
    alert('username or password cann\'t be blank');
  
);

const form = document.querySelector('form');
const input = document.getElementById('inputUsername');
const inputTwo = document.getElementById('inputEmail');
const inputThree = document.getElementById('inputPassword');
const ul = document.querySelector('ul')
const button = document.querySelector('button')

let usernamesArray = localStorage.getItem('usernames') ?
JSON.parse(localStorage.getItem('usernames')) : []

let emailsArray = localStorage.getItem('emails') ?
JSON.parse(localStorage.getItem('emails')) : []

let passwordsArray = localStorage.getItem('passwords') ?
JSON.parse(localStorage.getItem('passwords')) : []

let checkEmailsArray = localStorage.getItem('checkEmails') ?
JSON.parse(localStorage.getItem('checkEmails')) : []

let checkPasswordsArray = localStorage.getItem('checkPasswords') ?
JSON.parse(localStorage.getItem('checkPasswords')) : []

const liMaker = text => 
const li = document.createElement('li')
li.textContent = text;
ul.appendChild(li);


const liMakerTwo = text => 
const liTwo = document.createElement('li')
li.textContent = text;
ul.appendChild(li);


const liMakerThree = text => 
const liThree = document.createElement('li')
li.textContent = text;
ul.appendChild(li);

//let usernamesArray = []

localStorage.setItem('usernames', JSON.stringify(usernamesArray));
const data = JSON.parse(localStorage.getItem('usernames'))

//let emailsArray = []

localStorage.setItem('emails', JSON.stringify(emailsArray));
const dataTwo = JSON.parse(localStorage.getItem('emails'))

//let passwordsArray = []

localStorage.setItem('passwords', JSON.stringify(passwordsArray));
const dataThree = JSON.parse(localStorage.getItem('passwords'))

//let checkEmailsArray = []

localStorage.setItem('checkEmails', JSON.stringify(checkEmailsArray));
const dataFour = JSON.parse(localStorage.getItem('checkEmails'))

//let checkPasswordsArray = []

localStorage.setItem('checkPasswords', JSON.stringify(checkPasswordsArray));
const dataFive = JSON.parse(localStorage.getItem('checkPasswords'))

form.addEventListener('submit', function(e)
e.preventDefault()

checkEmailsArray.push(inputTwo.value)
localStorage.setItem('checkEmails', JSON.stringify(checkEmailsArray));

checkPasswordsArray.push(inputThree.value)
localStorage.setItem('checkPasswords', JSON.stringify(checkPasswordsArray));

usernamesArray.push(input.value);
localStorage.setItem('usernames', JSON.stringify(usernamesArray));

emailsArray.push(inputTwo.value)
localStorage.setItem('emails', JSON.stringify(emailsArray));

passwordsArray.push(inputThree.value)
localStorage.setItem('passwords', JSON.stringify(passwordsArray));

);

我尝试将'quis@google.com' 替换为emails array，将'quis' 替换为passwordsArray，但使用此数组的身份验证失败。我对 JS 函数、数组等几乎没有经验，这就是我被卡住的原因。 帮帮我伙计们:-) 这是 signin.html 文件以防万一。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width", initial-scale="1">
    <title>Signin #DB</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css">
    <link href="css/signin.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
  </head>
  <body class="text-center">
    <form class="signin" id="myForm">
        <h1 class="h3 mb-3 font-weight-normal">Please Sign In</h1>
        <label for="inputEmail" class="sr-only">Email Address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email Address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required><br>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button>
    </form>
    <script src="js/userscripts.js"></script>
  </body>
</html>

【问题讨论】：

尽管这是一个实践问题，但我想提醒您，在客户端环境中处理敏感信息（例如登录）是一个巨大的错误。这是黑客的字面糖果店。任何人都可以通过在浏览器中打开开发者工具来改变逻辑。正确的方法是处理简单的验证（例如，它是否是有效的电子邮件语法等），实际的用户名和密码检查应该在服务器端处理；在窥探之外。 【参考方案1】：

您可以使用Array#includes 检查您的值（用户名和/或密码）是否包含在数组中。

例子：

var emails = ["email@email.com", my@email.com"]
var passwords = ["1234", 5678"]

emails.includes("email@email.com") // returns true
emails.includes("foo@bar") // returns false

passwords.includes("1234") // returns true
password.includes("an actual password") // returns false

因此您可以通过以下方式对其进行验证：请记住，电子邮件和密码数组实际上来自您的localStorage。你必须在这个例子中改变它。

var isValidEmail = emails.includes($("#inputEmail").val())
var isValidPassword = passwords.includes($("#inputPassword").val())

if (isValidEmail && isValidPassword) 
  // Do something
 else 
  // Handle error

【讨论】：

以上是关于从 jQuery 中的现有电子邮件和密码数组中验证电子邮件和密码的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 密码验证和深入理解JSONP前端jQuery框架

PHPPHP+Mysql+jQuery找回密码

使用现有数据库表中的用户名和密码在 Blazor 中进行身份验证？

IE 9 中的 Twitter Bootstrap + jQuery 验证问题

表单验证 - Django 中的注册和登录错误处理

JQuery确认密码验证不起作用