通过 Bootstrap 和 jQuery 进行客户端输入验证

Question

我有点卡住了，我什至不知道从哪里开始但是我需要在正确的密码上将第一次输入标记为绿色，如果密码不符合要求则标记为红色

要求：

密码长度必须至少为 10 个字符，并且包含大小写字母

少于 15 个字符的密码必须包含一个数字和一个特殊字符

如果第二个输入轮廓与第一个输入匹配且密码正确，则将第二个输入轮廓标记为绿色，否则为红色。非常感谢任何帮助

        <div class="form-group">
            <label for="newPasswordTextBox">Password</label>
            <input type="password" id="newPasswordTextBox" class="form-control" name="newPassword" 
             placeholder="New Password" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="confirmNewPasswordTextBox">Confirm Password</label>
            <input type="password" id="confirmNewPasswordTextBox" class="form-control" 
             name="confirmNewPassword" placeholder="Confirm New Password" autocomplete="off">
        </div>
        <div class="small">
            <ul>
                <li>Passwords must be at least 10 characters long and have a lowercase and 
                 uppercase letters</li>
                <li>Passwords less than 15 characters must have a number and a special 
                character</li>
            </ul>
        </div>

Answer 1

您可以尝试使用 javascript 来收集输入 document.getElementById("newPasswordTextBox") 和 document.getElementById("confirmNewPasswordTextBox")，然后您可以从输入框中获取 .value 属性来检查输入是否符合条件您指定的要求。例如

let newPass=document.getElementById("newPasswordTextBox");
newPass.addEventListener("keyup",function(evt){
  let val=newPass.value;
  //check requirements here
});

或 jquery

$("#newPasswordTextBox").on("keyup", function(evt){
  let val=$("#newPasswordTextBox").val(); //get the value using jquery
//check requirements here
});

接下来，使用 //check requirements here 的 if 条件来获取您的功能。您可以使用 val.length 获取从文本框中获取的字符串的长度，然后将其与您想要的大小进行比较 (10)。对 15 重复上述操作，但只需添加检查数字和特殊字符的额外要求（参见 regular expressions in javascript）。要验证密码是否匹配，只需获取两个值并使用“===”来确定它们是否相等。您还可以使用边框属性更改输入框的轮廓颜色，如下所示：

$("#newPasswordTextBox").css({"border-color":"green"});//Use the appropriate id and colour for the box you wish to change

添加（更正作者代码post）：我已经设法捕获了我认为您在这里想要的大部分内容，并通过更改被调用的错误变量并更改为正确的正则表达式代码来更正了您的一些代码。

$("#newPasswordTextBox").on("keyup", function () {
        let pass = $("#newPasswordTextBox").val();
        if ((pass.length >=10) && (pass.length < 15)) {
            var regex = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[ `!@#$%^&*()_+\-=\[\]{};':"\|,.<>\/?~])/;
    if(!pass.match(regex)){
     $("#newPasswordTextBox").css({ "border-color": "red"});
        }
    else{
      $("#newPasswordTextBox").css({ "border-color": "green" });
    }
        } else if (pass.length>=15){       
            $("#newPasswordTextBox").css({ "border-color": "green","outline":"none" });
        }else {
            $("#newPasswordTextBox").css({ "border-color": "red","outline":"none" });
        }
        }
    );

    $("#confirmNewPasswordTextBox").on("keyup", function () {
        let pass = $("#confirmNewPasswordTextBox").val();
        let confpass = $("#newPasswordTextBox").val();

        if (pass === confpass) {
            $("#confirmNewPasswordTextBox").css({ "border-color": "green","outline":"none" })
        } else {
            $("#confirmNewPasswordTextBox").css({ "border-color": "red","outline":"none" });

        }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
  <input type="text" id="newPasswordTextBox" placeholder="new">
  <input type="text" id="confirmNewPasswordTextBox" placeholder="re-enter">
</body>

通过 Bootstrap 和 jQuery 进行客户端输入验证

Client side input validation via Bootstrap and jQuery

html

javascript

css

validation

jquery