jQuery密碼（4位數字）驗證

Question

我需要驗證一個簡單的密碼/密碼表單，然后如果正確就可以提交。

如何驗證此密碼：如果密碼錯誤，則顯示一條消息。 如果密碼正確，那么按一下按鈕並繼續！ 任何幫助將非常感激。

HTML：

<form>
    <input type="password" maxlength="1" id="" name="pass" />
    <input type="password" maxlength="1" id="" name="pass" />
    <input type="password" maxlength="1" id="" name="pass" />
    <input type="password" maxlength="1" id="" name="pass" />
    <input type="submit" value="submit" id="submit" disabled="disabled" />
</form>

JS：

 $("form").validate({
        rules: {
            pass: {
                required: true,
                minlength: 4,
                equalTo: "0000"
            }
        },
        messages: {
            pass: {
                required: "Please provide a PIN DIGIT",
                minlength: "Please enter at least 4 numbers"
            }
        }
    });

http://jsfiddle.net/E4Gz6/

Answer 1

為此，您將不得不使用jQuery Ajax。

制作一個簡單的PHP腳本，該腳本將獲取POST數據，這將是您的密碼，並且如果該密碼與您的數據庫匹配（例如，與您的數據庫匹配）或直接硬編碼到PHP腳本中，它將回顯true或false。 如果您不使用PHP，並且將PIN存儲在Javascript中，則其他人將可以看到它。

編輯：這應該根據您的設計工作。

<form>
<input type="password" maxlength="1" id="digit1" class="pass" />
<input type="password" maxlength="1" id="digit2" class="pass" />
<input type="password" maxlength="1" id="digit3" class="pass" />
<input type="password" maxlength="1" id="digit4" class="pass" />
<input type="submit" value="submit" id="submit" disabled="disabled" />
</form>

JS：

$( document ).ready(function() {

 $(".pass").keydown( function() {
 pass=$("#digit1").val() + $("#digit2").val() + $("#digit3").val() + $("#digit4").val();
  $.ajax({
   type: "POST",
   url: "passCheck.php",
    data: "password="+pass,
    success: function(html){    
    if(html=='true')    {
         $("#submit").removeAttr("disabled");
    }
    else    {
         $("#submit").attr('disabled','disabled');

    }
   },

  });
});   

}）;

PHP ：（以防萬一）

$pass = $_POST["password"];

if ($pass == "1234")
echo "true";
else
echo "false";

編輯2：如果您不想使用PHP和Ajax，只是為了進行原型設計和使用它，則可以使用簡單的檢查，但是強烈建議不要使用它，因為每個人都可以在代碼中看到密碼：

JS：

$( document ).ready(function() {

 $(".pass").keydown( function() {
 pass=$("#digit1").val() + $("#digit2").val() + $("#digit3").val() + $("#digit4").val();

 correctPass = "1234";  
    if(pass==correctPass)    {
         $("#submit").removeAttr("disabled");
    }
    else    {
         $("#submit").attr('disabled','disabled');
    }
   });
});