当 "pin" 全部输入正确时，多个小键盘执行特定操作

Question

有没有办法让我可以制作 5 个小键盘，每个小键盘输入 13 个字符，如果输入正确，就会执行一个操作

Answer 1

您可以通过多种方式来执行此操作。如果确实是密码，我建议您在服务器端进行最终检查。如果您在客户端进行每个检查，那么实际密码功能的想法就会过时，因为实际上任何人都可以通过打开开发者来修改检查。他们浏览器中的工具。

对于我的示例，我将使用 jQuery 作为我的客户端脚本语言，并使用 AJAX 将值发送到将执行服务器端验证的页面。

在此示例中，我将使用 PHP 进行服务器端验证。

HTML:

<div class="row">
    <div class="form-group col-md-8">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text rounded-0">1st Password:</span>
            </div>
            <input type="password" class="form-control rounded-0 passwordField"  id="passOne" placeholder="Enter 13 character password" />
        </div>
        <span class="errField text-danger text-center"></span>
    </div>
</div>

<div class="row">
    <div class="form-group col-md-8">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text rounded-0">2nd Password:</span>
            </div>
            <input type="password" class="form-control rounded-0 passwordField"  id="passTwo" placeholder="Enter 13 character password" />
        </div>
        <span class="errField text-danger text-center"></span>
    </div>
</div>

<div class="row">
    <div class="form-group col-md-8">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text rounded-0">3rd Password:</span>
            </div>
            <input type="password" class="form-control rounded-0 passwordField"  id="passThree" placeholder="Enter 13 character password" />
        </div>
        <span class="errField text-danger text-center"></span>
    </div>
</div>

<div class="row">
    <div class="form-group col-md-8">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text rounded-0">4th Password:</span>
            </div>
            <input type="password" class="form-control rounded-0 passwordField"  id="passFour" placeholder="Enter 13 character password" />
        </div>
        <span class="errField text-danger text-center"></span>
    </div>
</div>

<div class="row">
    <div class="form-group col-md-8">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text rounded-0">5th Password:</span>
            </div>
            <input type="password" class="form-control rounded-0 passwordField"  id="passFive" placeholder="Enter 13 character password" />
        </div>
        <span class="errField text-danger text-center"></span>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <button class="btn-primary" id="submitBtn">Submit</button>
    </div>
</div>

JavaScript / jQuery:

function checkFields() {
    var approval = false;
    var requiredLength = 13;
    
    
    $('.passwordField').each(function() {
        var passLength = $(this).val().length;
        
        if(passLength < requiredLength) {
            $(this).closest('.row').find('.errField').text("Please enter 13 characters");
        } else {
            $(this).closest('.row').find('.errField').text("");
            approval = true;
        }
    });
    
    return approval;
}

$('.passwordField').on("change", function() {
    var requiredLength = 13;
    var passLength = $(this).val().length;
    
    if(passLength < requiredLength) {
        $(this).closest('.row').find('.errField').text("Please enter 13 characters");
    } else {
        $(this).closest('.row').find('.errField').text("");
    }
});

$('#submitBtn').on("click", function() {
    if(checkFields()) {
        var passOne = $('#passOne').val();
        var passTwo = $('#passTwo').val();
        var passThree = $('#passThree').val();
        var passFour = $('#passFour').val();
        var passFive = $('#passFive').val();
        
        $.ajax({
            url: 'secret-check.php',
            method: 'POST',
            data: {
                passOne : passOne,
                passTwo : passTwo,
                passThree : passThree,
                passFour : passFour,
                passFive : passFive
            },
            success:function(html) {                 
                if(html.includes('lengthError')) {
                    alert("Please enter 13 characters for each password respectively");
                } else if(html.includes('passError')) {
                    alert("sorry, one or more passwords were incorrect");
                } else {
                    /*
                    Open sesame?
                    
                    I would suggest you do secret stuff server side,
                    else everyone can just edit the code and/or see the "secret",
                    using the dev tools. (ctrl+shift+i in Chrome).
                    */
                }   
            }
        });
    }
});

JavaScript / jQuery代码，细分：

您会注意到的第一件事是我正在通过 JavaScript / jQuery 对客户端进行一些检查。这些检查包括密码字段的长度是否至少包含 13 个字符。

您会看到我在 2 个不同的函数中执行此操作。这样做的原因是我想检查当前使用的字段，但如果用户尝试提交数据，我也想检查所有字段。

使用 jQuery 获取数据的方法是使用 selector 然后指定你想要的。在您的情况下，您对 value.

感兴趣

示例：

$('#passOne').val(); 将检索 id 等于 passOne.

的输入字段的值

# = id 选择器指示器。与 CSS 选择器相同。

. = class 选择器。

...等等。关于选择器的更多信息 here.

您还会注意到我正在使用 .each() 函数来遍历特定的 class 元素。如果您正在处理围绕使用一个 class 的多个元素用于一个或另一个目的的逻辑，则此函数会派上用场。更多关于 .each() 函数 here.

我使用这些函数的方式是通过一种叫做事件委托的东西。它允许我将事件（即 change 事件或 click 事件等）绑定到由选择器指定的元素（我们过去了选择器较早）。有关事件委托的更多信息 here。

接下来您会注意到 AJAX 函数。 AJAX 函数在 jQuery 中变得特别直接。它们相对容易理解，您可以将 AJAX 用于各种目的。在这种情况下，我们使用它来将数据解析为服务器端脚本。

你会注意到下面的结构。

url
方法
数据
成功

url 参数是我们要将数据解析到的页面的名称。它类似于 <form> 元素中的 action 属性。

method 参数定义了我们发送数据所用的方法。如果您以前使用过 <form> 元素，那么您会熟悉此参数。在我们的例子中，我们将方法指定为 POST 方法。另一种常用方法是 GET 方法。您可以阅读有关方法的更多信息 here.

data 参数非常简单。这正是它听起来的样子。这是我们解析的数据。结构为：variable_declaration 等于（在本例中由 : 赋值）some_value.

success参数是可选参数。它允许您在 AJAX 函数成功时执行操作。在我们的例子中，我们只是使用它向用户传递一些关于我们服务器端检查的信息。

AJAX函数的success函数中的html.includes()函数基本上是检查html（即本例中我们的PHP页面）是否包含某些html。我们基于该条件的逻辑来为我们的用户提供一些信息。

有关 jQuery AJAX 函数的更多信息 here。

PHP:

<?php
$passOne = $_POST['passOne'];
$passTwo = $_POST['passTwo'];
$passThree = $_POST['passThree'];
$passFour = $_POST['passFour'];
$passFive = $_POST['passFive'];

$passOneCheck = "abcdefghijklm10";
$passTwoCheck = "abcdefghijklm11";
$passThreeCheck = "abcdefghijklm12";
$passFourCheck = "abcdefghijklm13";
$passFiveCheck = "abcdefghijklm14";

$requiredLength = 13;

if(strlen($passOne) < $requiredLength or strlen($passTwo) < $requiredLength or strlen($passThree) < $requiredLength or strlen($passFour) < $requiredLength or strlen($passFive) < $requiredLength) {
    echo "lengthError";
} else if($passOne == $passOneCheck && $passTwo == $passTwoCheck && $passThree == $passThreeCheck && $passFour == $passFourCheck && $passFive == $passFiveCheck) {
    //Do your secrets!
    //Redirect to another page?
    //header("Location: https://www.redirect-example.com/");
} else {
    echo "passError";
}
?>

Codepen 使用客户端验证模拟事件仅 here.

使用客户端验证模拟事件的片段仅:

function checkFields() {
    var approval = false;
    var requiredLength = 13;
    
    
    $('.passwordField').each(function() {
        var passLength = $(this).val().length;
        
        if(passLength < requiredLength) {
            $(this).closest('.row').find('.errField').text("Please enter 13 characters");
        } else {
            $(this).closest('.row').find('.errField').text("");
            approval = true;
        }
    });
    
    return approval;
}

$('.passwordField').on("change", function() {
    var requiredLength = 13;
    var passLength = $(this).val().length;
    
    if(passLength < requiredLength) {
        $(this).closest('.row').find('.errField').text("Please enter 13 characters");
    } else {
        $(this).closest('.row').find('.errField').text("");
    }
});


$('#cheatBtn').on("click", function() {
    var cheatArr = [
        "abcdefghijklm10",
        "abcdefghijklm11",
        "abcdefghijklm12",
        "abcdefghijklm13",
        "abcdefghijklm14"
    ];
    
    var i = 0;
    $('.passwordField').each(function() {
        $(this).val(cheatArr[i]);
        i++;
    });
    checkFields();
});


$('#submitBtn').on("click", function() {
    if(checkFields()) {
        var passOne = $('#passOne').val();
        var passTwo = $('#passTwo').val();
        var passThree = $('#passThree').val();
        var passFour = $('#passFour').val();
        var passFive = $('#passFive').val();
        
        /*
        This is just for Codepen simulation.
        These checks should be performed server side to be kept secret.
        */
        
        var passOneCheck = "abcdefghijklm10"
        var passTwoCheck = "abcdefghijklm11"
        var passThreeCheck = "abcdefghijklm12"
        var passFourCheck = "abcdefghijklm13"
        var passFiveCheck = "abcdefghijklm14"
        
        if(passOne == passOneCheck && passTwo == passTwoCheck && passThree == passThreeCheck && passFour == passFourCheck && passFive == passFiveCheck) {
            alert("You have unlocked the secrets!");
        } else {
            alert("One or more passwords were wrong");
        }
    }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
    <div class="col-md-8">
        <h2>Attention!</h2>
        <p>
            This example does not use any server side checks.
            This is only to mimic how the environment could work.
            
            This example also comes with a "cheat" button
            that will fill out the password fields with the proper passwords to simulate a success function.
        </p>
    </div>
</div>

<br />

<div class="row">
    <div class="form-group col-md-8">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text rounded-0">1st Password:</span>
            </div>
            <input type="password" class="form-control rounded-0 passwordField"  id="passOne" placeholder="Enter 13 character password" />
        </div>
        <span class="errField text-danger text-center"></span>
    </div>
</div>

<div class="row">
    <div class="form-group col-md-8">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text rounded-0">2nd Password:</span>
            </div>
            <input type="password" class="form-control rounded-0 passwordField"  id="passTwo" placeholder="Enter 13 character password" />
        </div>
        <span class="errField text-danger text-center"></span>
    </div>
</div>

<div class="row">
    <div class="form-group col-md-8">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text rounded-0">3rd Password:</span>
            </div>
            <input type="password" class="form-control rounded-0 passwordField"  id="passThree" placeholder="Enter 13 character password" />
        </div>
        <span class="errField text-danger text-center"></span>
    </div>
</div>

<div class="row">
    <div class="form-group col-md-8">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text rounded-0">4th Password:</span>
            </div>
            <input type="password" class="form-control rounded-0 passwordField"  id="passFour" placeholder="Enter 13 character password" />
        </div>
        <span class="errField text-danger text-center"></span>
    </div>
</div>

<div class="row">
    <div class="form-group col-md-8">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text rounded-0">5th Password:</span>
            </div>
            <input type="password" class="form-control rounded-0 passwordField"  id="passFive" placeholder="Enter 13 character password" />
        </div>
        <span class="errField text-danger text-center"></span>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <button class="btn-primary" id="cheatBtn">I'm a cheater!</button>
    </div>
    
    <div class="col-md-4">
        <button class="btn-primary" id="submitBtn">Submit</button>
    </div>
</div>

当 "pin" 全部输入正确时，多个小键盘执行特定操作

Multiple numpads to do a specific action when the "pin" is entered right in all of them

html

passwords

numpad