密码验证的特殊字符

Question

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 class="notif" id="pass"></span><br />
            <div id="message">
              <p id="letter" class="invalid">Lowercase letter</p>
              <p id="capital" class="invalid">Uppercase letter</p>
              <p id="number" class="invalid">Number</p>
              <p id="special" class="invalid">Special Character</p>
              <p id="length" class="invalid">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?

Answer 1

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.

Answer 2

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

Answer 3

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)(?=.*[az])(?=.*[AZ])(?=.*[^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'); }