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

【问题标题】：Client side input validation via Bootstrap and jQuery通过 Bootstrap 和 jQuery 进行客户端输入验证
【发布时间】：2021-10-17 11:51:48
【问题描述】：

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

要求：

密码长度必须至少为 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>

【问题讨论】：

标签： javascript html jquery css validation

【解决方案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

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

$("#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>

【讨论】：

我可以这样做吗``` if(val.length > 10) || (val.length
好吧，如果你使用那个 or(||) 如果值小于 10 它仍然会触发绿色的变化，因为 ||检查任何一个是否为真，10) &&(val.length15){ $("#newPasswordTextBox" ).css({"border-color":"green"}) } else{ $("#newPasswordTextBox").css({"border-color":"red"}) ;}.
好的我已经做了一些事情，我将它作为答案发布，以检查它是否好，并给你正确的一个标记