HTML 和 Javascript 客户端身份验证

Question

我正在创建客户端验证（是的，这似乎没有用，但确实有用）。问题是我的js不太好，我的代码不工作。

•我想要完成的事情：

用户输入 "ABCD" 作为密码并点击提交。 Javascript 检查密码是否为 "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 总是生成 'wrong pass' 消息。所以这意味着 if ($('input[pass] .login__input').val() == password) { 永远不会是真的。为什么这永远不是真的，即使我使用 "ABCD"?

谢谢大家！

Answer 1

因为这个选择器不好：

$('input[pass] .login__input')

这里是正确的：

$('.login__input.pass')

Answer 2

使用其中之一

$('input[type=password]')

或

$('.login__input.pass')

作为选择器。

HTML 和 Javascript 客户端身份验证

HTML and Javascript Client-Side Authentication

html

javascript

authentication

client-side