Jquery密码(4位数字)验证

时间:2014-04-29 11:30:18

标签: javascript jquery validation

我需要验证一个简单的pin / passcode表单,然后能够提交,如果正确的话。

如何验证此引脚编号 如果passocode错误则显示一条消息。 如果密码是正确的那么enble按钮继续! 任何帮助将非常感激。

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/

1 个答案:

答案 0 :(得分:0)

为此你必须使用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');
    }
   });
});