Я создал форму забытого пароля и хочу разрешить пользователю создавать инструкции с надежным паролем в jQuery.Как: кнопка «Отправить» отключена, пока пользователь не введет комбинацию UpperCase,LowerCase,Number,Character
в поле пароля, и после, если оба пароля текстового поля будут сопоставлены, кнопка «Отправить» будет включена для щелчка ..
Я сделал базовое сопоставление двух полей в jquery, но яне знаю, как я могу обнаружить или разрешить пользователю печатать вышеуказанные символы, альфа, номер и т. д.
, пожалуйста, помогите мне создать эту функцию;
<input class="password1" id="password1" name="password1" type="password" placeholder="New password.." />
<div class="progress-bar_wrap">
<div class="progress-bar_item progress-bar_item-1"></div>
<div class="progress-bar_item progress-bar_item-2"></div>
<div class="progress-bar_item progress-bar_item-3"></div>
</div>
<input class="confirmpassword" id="confirmpassword" name="confirmpassword" type="password" placeholder="New password agian.." />
<div class="instdiv" id="instdiv"></div>
<input class="btn btn-primary_ok" name="submit" type="submit" id="submit" value="Submit & Update" /><br />
<script>
$("#instdiv").html('1. The password should contain a minimum of 8 and a maximum of 16 characters.<br/>2. Password should be alpha-numeric with atleast 4 distinct characters and 1 special character.<br/>3. Spaces are not allowed in a password.');
$(function() {
$("#confirmpassword").keyup(function() {
var password = $("#password1").val();
$("#instdiv").html(password == $(this).val()
? "Great!"
: "not Matched"
);
});
});
</script>
Я уже использую счетчик паролей, я хочу показать в сообщении, что нужно в текстовом поле, например: если пользователь вводит только нижний регистр, то сообщение показывает atleast One Uppercase
и наоборот, и если пользователь вводит только число, html текст показывает atleast One Character and Uppercase and Lowercase
и суммарный символ должен быть выше 8 и ниже 25.
Попытайтесь понять ..
PassWord Meter Я сделал: Обновленный вопрос
$( document ).ready(function() {
$('#password1').keyup(function(){
let len = this.value.length;
const pbText = $('.progress-bar_text');
if (len === 0) {
$('.progress-bar_item').each(function() {
$(this).removeClass('active')
});
}
else if (len > 0 && len <=8) {
$('.progress-bar_item-1').addClass('active');
$('.progress-bar_item-2').removeClass('active');
$('.progress-bar_item-3').removeClass('active');
}
else if (len > 8 && len <= 16) {
$('.progress-bar_item-2').addClass('active');
$('.progress-bar_item-3').removeClass('active');
}
else {
$('.progress-bar_item').each(function() {
$(this).addClass('active');
});
}
});
});
.progress-bar_wrap {
width: 100%;
height: 5px;
background: #F6F6FA;
display: inline-block;
vertical-align: middle;
overflow: hidden;
border-radius: 5px;
}
.progress-bar_item {
display: inline-block;
height: 100%;
width: 32.5%;
margin-right: .8%;
border-radius: 5px;
float: left;
transition: background-color .2s, visisility .1s;
}
.progress-bar_item-1.active {
background-color: #FF4B47;
}
.progress-bar_item-2.active {
background-color: #F9AE35;
}
.progress-bar_item-3.active {
background-color: #2DAF7D;
}