密码检查/加强密码

Question

我试图为一个用户创建一个帐户，我想加强密码，我应该添加什么？

我不知道如何加强密码，我的意思是，我想要求大写和小写，以及添加数字的密码。

我是不是遗漏了什么？还是这里出了什么问题？我应该改变这里的一切吗？

<div class="form-group row">
  <label class="col-12 col-sm-3 col-form-label text-sm-right">Username</label>
  <div class="col-12 col-sm-8 col-lg-6">
  <input data-parsley-type="alphanum" type="text" name="username" pattern="(?=.*[a-z]).{10, }.+" required="" placeholder="" class="for m-control">
   </div>
</div>
<div class="form-group row">
  <label class="col-12 col-sm-3 col-form-label text-sm-right" for="pass1">Password</label>
  <div class="col-12 col-sm-8 col-lg-6">
  <input  data-parsley-type="alphanum" type="passwrd" id="password" name="password"  required="" placeholder="" class="form-control" onkeyup="return validate()">
    <ul>
        <li id="uppercase">At least 1 Uppercase Character</li>
        <li id="lowercase">At least 1 Lowercase Character</li>
        <li id="num">At least 1 Number</li>
        <li id="maxChar">At least 8 characters long</li>
    </ul>
   </div>
</div>

我想我把这里的一切都搞砸了，因为它不起作用

$(document).ready(function(){
            var lowercase = new RegExp('[a-z]');
            var uppercase = new RegExp('[A-Z]');
            var number = new RegExp('[0-9]');
            $("#password").keyup(function(){
                var password = $(this).val()
                    if(password.length == 8){
                        $("maxChar").css("color", "green");
                    }else{
                        $("maxChar").css("color", "red");
                    }
                    if(password.match(lowercase)){
                        $(".lowercase").css("color", "green");
                    }else{
                        $(".lowercase").css("color", "red");
                    }
                    if(password.match(uppercase)){
                        $(".uppercase").css("color", "green");
                    }else{
                        $(".uppercase").css("color", "red");
                    }
                    if(password.match(number)){
                        $(".num").css("color", "green");
                    }else{
                        $(".num").css("color", "red");
                    }
                    if (/^[a-zA-Z0-9]=$/.test(password) == false){

                    }   $(".symbol").css("color", "green");
                    }else{
                        $(".symbol").css("color", "red");
                    }
            })
    </script>-->

Answer 1

您的代码存在问题：

它生成语法错误:多余的})

• the引用元素被关闭:类与id

• 逻辑错误:在使用jQuery

时不需要测试symbol

• onkeyup=""错误

固定代码：

​

$(document).ready(function() {
  $("#password").keyup(function() {
    var password = $(this).val();
    if(password.length >= 8){
      $("#maxChar").css("color", "green");
    } else {
      $("#maxChar").css("color", "red");
    }
    if(/[a-z]/.test(password)) {
      $("#lowercase").css("color", "green");
    } else {
      $("#lowercase").css("color", "red");
    }
    if(/[A-Z]/.test(password)) {
      $("#uppercase").css("color", "green");
    } else {
      $("#uppercase").css("color", "red");
    }
    if(/[0-9]/.test(password)) {
      $("#num").css("color", "green");
    } else {
      $("#num").css("color", "red");
    }
    if(/[^a-zA-Z0-9]/.test(password)) {
      $("#symbol").css("color", "green");
    } else {
      $("#symbol").css("color", "red");
    }
  }).trigger('keyup');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
  <label class="col-12 col-sm-3 col-form-label text-sm-right">Username</label>
  <div class="col-12 col-sm-8 col-lg-6">
  <input data-parsley-type="alphanum" type="text" name="username" pattern="(?=.*[a-z]).{10, }.+" required="" placeholder="" class="for m-control" />
   </div>
</div>
<div class="form-group row">
  <label class="col-12 col-sm-3 col-form-label text-sm-right" for="pass1">Password</label>
  <div class="col-12 col-sm-8 col-lg-6">
  <input  data-parsley-type="alphanum" type="password" id="password" name="password"  required="" placeholder="" class="form-control" />
    <ul>
        <li id="uppercase">At least 1 Uppercase Character</li>
        <li id="lowercase">At least 1 Lowercase Character</li>
        <li id="symbol">At least 1 Symbol</li>
        <li id="num">At least 1 Number</li>
        <li id="maxChar">At least 8 characters long</li>
    </ul>
   </div>
</div>

​