[英]jQuery form validation with password strength check
我对jQuery有基本的了解。 我目前正在使用密码强度检查进行jQuery表单验证。 我已经完成了密码强度检查部分,但我不知道在满足条件后如何启用提交按钮。
Here is my code:
https Here is my code:
//codepen.io/jagan/pen/rzZqMq
您可以根据状态栏使用按钮的禁用启用,轻松快速解决问题,但我相信如果您想使它更通用和坚实,您可以依赖于设置为false的标志,如果验证脏或仅将其切换为true如果验证行为符合您的要求
$(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);
// }
});
检查下面的代码,您使用全局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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.