Special Characters for password validation-CodePudding

I'm kind of confuse at the moment with my special character validation.

HTML:

<label>
            Password:
            <br /><input
              type="password"
              id="password"
              placeholder="Enter password"
              pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})"
            /><br />
            <span  id="pass"></span><br />
            <div id="message">
              <p id="letter" >Lowercase letter</p>
              <p id="capital" >Uppercase letter</p>
              <p id="number" >Number</p>
              <p id="special" >Special Character</p>
              <p id="length" >Minimum 8 characters</p>
            </div>
          </label>

CSS:

#message {
  display: none;
  background: #ffffff;
  color: #000;
  padding: 0;
  margin-top: 0;
  margin-left: 5px;
}

#message p {
  padding: 1px 2px;
  font-size: 12px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -3px;
  content: '✔';
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -5px;
  content: '✖';
}

This is my JS for the special characters validation. I'm still confused about how to make it work. Whenever I type in a special character, it only highlights the lowercase.

JS:

  // Validate special characters
  var specialCharacters = /[^A-Za-z0-9]/g;
  if (myInput.value.match(specialCharacters)) {
    letter.classList.remove('invalid');
    letter.classList.add('valid');
  } else {
    letter.classList.remove('valid');
    letter.classList.add('invalid');
  }

I know my problem lies somewhere in var specialCharacters = /[^A-Za-z0-9]/g; but what could it be?

CodePudding user response：

You can follow this:

  var strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");

What does it mean?

^   The password string will start this way
(?=.*[a-z]) The string must contain at least 1 lowercase alphabetical character
(?=.*[A-Z]) The string must contain at least 1 uppercase alphabetical character
(?=.*[0-9]) The string must contain at least 1 numeric character
(?=.*[!@#$%^&*])    The string must contain at least one special character, but we are escaping reserved RegEx characters to avoid conflict
(?=.{8,})   The string must be eight characters or longer

You can edit the expression, for example if you want to change minimum length to 10 change (?=.{8,}) to (?=.{10,})

 You can check the condition by strongRegex.exec(myInput)

I hope this gave the ans.

CodePudding user response：

Here /[^A-Za-z0-9]/g explained step by stepstrong text:

/ for Find a word character.
^ Find any character NOT between the brackets.
A-Za-z0-9 mean the capital letter A to Z and small
latter a to z, and 0 to 9 if any character or number and the
/g Perform a global match (find all matches rather than stopping after the first match)

You can learn more about this similar type operation or regular expression here JavaScript RegExp Reference

CodePudding user response：

You can use this Expression for your password validation.

var specialCharacters = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/

This expression will check for one uppercase ,one lowercase, one special character and password length should be 8 to 15 characters.

 var specialCharacters = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
  if (myInput.value.match(specialCharacters)) {
    letter.classList.remove('invalid');
    letter.classList.add('valid');
  } else {
    letter.classList.remove('valid');
    letter.classList.add('invalid');
  }