1

Tengo un código que hace un checking del password y si este es corto, imprime lo correspondiente. Mi problema es que tengo la variable return y necesito que esta imprima un texto envuelto en <p>...</p>, pero no se muy bien como hacer. Aquí os dejo el código.

 $('#password').keyup(function () {
    $('#result').html(checkStrength($('#password').val()))
})

function checkStrength(password) {
    var strength = 0
    if (password.length < 6) {
        $('#result').removeClass()
        $('#result').css("background-color", "red"),
        return 'Too short'
    }
    if (password.length > 7) strength += 1

    if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1

    if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1

    if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1

    if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1

    if (strength < 2) {
        $('#result').removeClass(),
        $('#result').css("background-color" , "orange")
        return 'Weak'
    } else if (strength == 2) {
        $('#result').removeClass()
        $('#result').css("background-color", "green")
        return 'Good'
    } else {
        $('#result').removeClass()
        $('#result').css("background-color", "var(--jobcafe-grün)")
        return 'Strong'
    }
}

Espero que alguien me pueda ayudar. Un saludo

0

2 respuestas 2

1

Has probado, simplemente, a poner return '<p>Too short</p>'?

Funciona bien, aquí tienes un ejemplo con tu código:

$('#password').keyup(function () {
    $('#result').html(checkStrength($('#password').val()))
})

function checkStrength(password) {
    var strength = 0
    if (password.length < 6) {
        $('#result').removeClass();
        $('#result').css("background-color", "red");
        return '<p>Too short</p><p>muy corta</p>'
    }
    if (password.length > 7) strength += 1

    if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1

    if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1

    if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1

    if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1

    if (strength < 2) {
        $('#result').removeClass(),
        $('#result').css("background-color" , "orange")
        return 'Weak'
    } else if (strength == 2) {
        $('#result').removeClass()
        $('#result').css("background-color", "green")
        return 'Good'
    } else {
        $('#result').removeClass()
        $('#result').css("background-color", "var(--jobcafe-grün)")
        return 'Strong'
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" id="password" />
<div id="result"></div>

1

¿Cuál es el motivo de querer devolverlo envuelto en un elemento p? ¿Podrías probar esto?

$('#result').html(`<p>${checkStrength( $('#password').val() )}</p>`);

Es para que la función de comprobar la fortaleza sólo haga eso, no tenga que entender de HTML (lo que sería un buen principio de diseño, que puedes consultar aquí: SRP o Principio de Responsabilidad Única.

De ese modo, la función checkStrengh también se vuelve más fácil de testear, sobre todo cuando el flujo pase por una contraseña corta o débil, y no tienes que mezclar con código HTML.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.