j查询表单验证与密码强度检查

Question

我对jQuery有基本的了解。我目前正在使用密码强度检查进行jQuery表单验证。 我已经完成了密码强度检查部分，但我不知道如何在满足条件后启用提交按钮。

Here is my code:https://codepen.io/jagan/pen/rzZqMq

Answer 1

您可以根据状态栏对按钮使用禁用启用，轻松快速解决问题，但我相信如果您想使其更加通用和可靠，您可以依靠设置false的标志，如果验证脏了，或者仅当验证行为符合您想要的方式时，才将其切换为真

$(document).ready(function(){  
$('#password').keyup(function(){
var valid = true; 
$('#result').html(checkStrength($('#password').val()));
//Calculated strength value, we can return messages
if( !valid){
alert('errorMessage');
}
});  

function checkStrength(password){
var strength = 0;

//If password contains both lower and uppercase characters, increase strength value.
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) {
strength += 1 ;
$('.low-upper-case').addClass('text-success');
}
else{
$('.low-upper-case').removeClass('text-success');
valid = false;
}
//If it has numbers and characters, increase strength value.
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)){
strength += 1;
$('.one-number').addClass('text-success'); 
} 
else{
$('.one-number').removeClass('text-success');
valid = false;
} 
//If it has one special character, increase strength value.
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) {
strength += 1;
$('.one-special-char').addClass('text-success');
}
else{
$('.one-special-char').removeClass('text-success');
valid = false;
}
if (password.length > 7){
strength += 1;
$('.eight-character').addClass('text-success');
}
else{
$('.eight-character').removeClass('text-success');
valid = false;
}


// If value is less than 2
if (strength < 2 )
{
$('#result').removeClass()
$('#password-strength').addClass('progress-bar-danger');
$('#result').addClass('text-danger')
$('#password-strength').css('width', '10%');
$("#sign-up").attr("disabled",true)
return 'Very Weak'           
}
else if (strength == 2 )
{
$('#result').removeClass()
$('#result').addClass('good');
$('#password-strength').removeClass('progress-bar-danger');
$('#password-strength').addClass('progress-bar-warning');
$('#result').addClass('text-warning')
$('#password-strength').css('width', '60%');
$("#sign-up").attr("disabled",true)
return 'Week'       
}
else if (strength == 4)
{
$('#result').removeClass()
$('#result').addClass('strong');
$('#password-strength').removeClass('progress-bar-warning');
$('#password-strength').addClass('progress-bar-success');
$('#result').addClass('text-success');
$('#password-strength').css('width', '100%');
$("#sign-up").attr("disabled",false)
return 'Strong'
}
}
// if (passwordStatus == true){
// $('#sign-up').prop("disabled", false);   
// }
});

Answer 2

检查下面的代码，你使用全局javascript变量来验证用false初始化的密码。

function checkStrength(password){
var valid = true;
var strength = 0;

//If password contains both lower and uppercase characters, increase strength value.
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) {
strength += 1 ;
$('.low-upper-case').addClass('text-success');
}
else{
$('.low-upper-case').removeClass('text-success');
valid = false;
}
//If it has numbers and characters, increase strength value.
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)){
strength += 1;
$('.one-number').addClass('text-success'); 
} 
else{
$('.one-number').removeClass('text-success');
valid = false;
} 
//If it has one special character, increase strength value.
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) {
strength += 1;
$('.one-special-char').addClass('text-success');
}
else{
$('.one-special-char').removeClass('text-success');
valid = false;
}
if (password.length > 7){
strength += 1;
$('.eight-character').addClass('text-success');
}
else{
$('.eight-character').removeClass('text-success');
valid = false;
}
if (valid){
$('#sign-up').prop("disabled", false);   
}

}