HTML和Javascript客户端身份验证

HTML and Javascript Client-Side Authentication

本文关键字：身份验证 客户端 Javascript HTML      更新时间：2023-09-26

我正在创建一个客户端验证(是的，这似乎没有任何目的，但它有)。问题是，我不是很好与js和我的代码不工作。

•我想要完成的事情:

用户输入"ABCD"作为密码并点击提交。Javascript检查password是否为"ABCD"，如果是，则继续，如果不是，则显示错误消息。

•代码

HTML: 

<div class="login">
  <div class="login__check"></div>
  <div class="login__form">
    <div class="login__row">
      <svg class="login__icon pass svg-icon" viewBox="0 0 20 20">
        <path d="M0,20 20,20 20,8 0,8z M10,13 10,16z M4,8 a6,8 0 0,1 12,0" />
      </svg>
      <input type="password" class="login__input pass" placeholder="Password"/>
    </div>
    <button type="button" class="login__submit">Sign in</button>
    <p class="login__signup">Don't have an account? &nbsp;<a>Sign up</a></p>
  </div>
</div>
JAVASCRIPT: 

   $(document).on("click", ".login__submit", function (e) {
    var password = "ABCD";
    //this is your password input box
    if ($('input[pass] .login__input').val() == password) {
        if (animating)
            return;
        animating = true;
        var that = this;
        ripple($(that), e);
        $(that).addClass("processing");
        setTimeout(function () {
            $(that).addClass("success");
            setTimeout(function () {
                $app.show();
                $app.css("top");
                $app.addClass("active");
            }, submitPhase2 - 70);
            setTimeout(function () {
                $login.hide();
                $login.addClass("inactive");
                animating = false;
                $(that).removeClass("success processing");
            }, submitPhase2);
        }, submitPhase1);
    } else {
        alert('Wrong pass!');
    }
});

确切的问题:

index.js总是生成一个'错误传递'消息。这意味着if ($('input[pass] .login__input').val() == password) {不为真。为什么即使我使用"ABCD"，这也不正确?

谢谢大家!

这是因为这个选择器是坏的:

$('input[pass] .login__input')

正确如下:

$('.login__input.pass')

使用

$('input[type=password]')

或

$('.login__input.pass')

相关文章：