Si est\u00e1s buscando la manera de reflejar la calidad de un password que un usuario est\u00e1 introduciendo en un formulario, te dejo el c\u00f3digo para que lo utilices cuando quieras.<\/p>\n\n\n\n
\u00bfQu\u00e9 necesitamos?<\/strong><\/p>\n\n\n\n Las librer\u00edas por supuesto de bootstrap y jquery, bootstrap pq con su framework nos d\u00e1 una serie de componentes que podemos utilizar facilmemte y juqery para manejar tanto bootstrap como el siguiente c\u00f3digo.<\/p>\n\n\n\n Tambi\u00e9n necesitaremos un campo input donde vamos a introducir nuestro password y un componentes progress.<\/p>\n\n\n\n Campo input:<\/strong><\/p>\n\n\n\n C\u00f3mo podr\u00e9is ver le hemos metido ya la clase de bootstrap para tomar su dise\u00f1o y hemos a\u00f1adido el atributo placeholder para que aparezca la descripci\u00f3n del campo dentro, no es necesario.<\/p>\n\n\n\n Control progress bar<\/strong>:<\/p>\n\n\n\n Nuestro c\u00f3digo de script:<\/strong><\/p>\n\n\n\n Si est\u00e1s buscando la manera de reflejar la calidad de un password que un usuario est\u00e1 introduciendo en un formulario,<\/p>\n","protected":false},"author":1,"featured_media":866,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[384],"tags":[388,387],"yoast_head":"\n<input name=\"campo_password\" type=\"text\" id=\"campo_password\" class=\"form-control\" placeholder=\"Contrase\u00f1a\"><\/code><\/pre>\n\n\n\n<div class=\"progress\">\n<div id=\"progress-bar\" class=\"progress-bar bg-success\" role=\"progressbar\" style=\"width: 25%\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n<\/div><\/code><\/pre>\n\n\n\n<script>\n $(\"#campo_password\").keyup(function () {\n $quality = 0;\n\n \/\/Revisamos la calidad del password.\n var password = $(\"#campo_password\").val();\n\n if (password.length >= 6) $quality += 20\n if (password.match(\/([a-z].*[A-Z])|([A-Z].*[a-z])\/)) $quality += 20\n if (password.match(\/([a-zA-Z])\/) && password.match(\/([0-9])\/)) $quality += 20\n if (password.match(\/([!,%,&,@,#,$,^,*,?,_,~])\/)) $quality += 20\n if (password.match(\/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])\/)) $quality += 20\n\n $('#progress-bar').css('width', $quality + '%');\n $('#progress-bar').attr('aria-valuenow', $quality);\n switch (true) {\n case ($quality == 0):\n $('#progress-bar').removeClass()\n $('#progress-bar').addClass('progress-bar bg-danger');\n break;\n case ($quality > 40 && $quality < 90):\n $('#progress-bar').removeClass()\n $('#progress-bar').addClass('progress-bar bg-warning');\n break;\n case ($quality > 90):\n $('#progress-bar').removeClass()\n $('#progress-bar').addClass('progress-bar bg-success');\n break;\n default:\n $('#progress-bar').removeClass()\n $('#progress-bar').addClass('progress-bar bg-danger');\n break;\n }\n });\n<\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"