html - 当在所有数字中输入“pin”时，多个数字键盘执行特定操作

Question

有没有办法我可以制作 5 个 13 个字符的数字小键盘，每个小键盘输入，所有输入正确的都会做一个动作

score 0 · Accepted Answer

有多种方法可以做到这一点。如果确实是密码，我建议您在服务器端进行最终检查。如果您每次都检查客户端，那么实际密码功能的想法就会过时，因为实际上任何人都可以通过打开开发人员来修改检查。浏览器中的工具。

对于我的示例，我将使用 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 选择器中已知的相同。

.= 类选择器。

... 等等。更多关于选择器的信息在这里。

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

我使用这些函数的方式是通过事件委托。它允许我将事件（即更改事件或单击事件等）绑定到由选择器指定的元素（我们之前讨论过选择器）。更多关于这里的事件委托。

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

您将注意到以下结构。

网址
方法
数据
成功

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

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

数据参数非常简单。这正是它听起来的样子。这是我们解析的数据。结构是：variable_declaration等于（:在这种情况下由分配）some_value。

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

html.includes()AJAX函数的success函数中的函数主要是检查html（本例中就是我们的PHP页面）是否包含某个html 。我们围绕该条件建立一个逻辑，为我们的用户提供一些信息。

更多关于 jQuery AJAX 函数的信息在这里。

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仅在此处使用客户端验证来模拟事件。

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

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>

html - 当在所有数字中输入“pin”时，多个数字键盘执行特定操作

1 回答 1

Related

Reference