Bad : jQuery username validation-CodePudding

When I try to let the name are false it should let border color of submit input turn into red but nothing happen in name

Body

            <div id="name">
                <input type="text" id="inputName" placeholder="Name">
            </div>
            <input id="signup" type="submit" value="SIGN UP">

Script

            function isName(inputName){
                var regex = /^[A-Za-z0-9\w]{4,20}*$/;
                return regex.test(inputName);
            }


            $("#signup").click(function ()
            {
                if (isName($("#inputName").val()) == false)
                {
                    $("#inputName").css("border-color", "#E33100");
                }
            })

CodePudding user response：

/^[A-Za-z0-9\w]{4,20}*$/

Invalid regular expression .. Nothing to repeat

* is not a valid regex character on its own.

It must be prefixed by something, frequently . as in .* => "." any character, "*" repeated any number of times (including 0).

Before your * you have {4,20} which means limit previous group to between 4 and 20 characters; this is not valid for something to repeat.

Remove the * and your regex works fine.

function isName(inputName) {
  var regex = /^[A-Za-z0-9\w]{4,20}$/;
  return regex.test(inputName);
}


$("#signup").click(function() {
  console.log(isName($("#inputName").val()));
  if (isName($("#inputName").val()) == false) {
    $("#inputName").css("border-color", "#E33100");
  } else {
    $("#inputName").css("border-color", "green");
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="name">
  <input type="text" id="inputName" placeholder="Name">
</div>
<input id="signup" type="submit" value="SIGN UP">