Autor: Dflying Chen ( http://dflying.cnblogs.com/ )
Este artículo se deriva de un artículo de Vitamin C.net que utiliza métodos matemáticos para reducir en gran medida la dificultad de implementar un juicio lógico. El código de detección proviene de la clase JS de THIN para verificar la seguridad de la contraseña.
Atlas proporciona potentes funciones orientadas a objetos de JavaScript del lado del cliente. He visto las publicaciones de los dos anteriores en los últimos días y creo que este requisito funcional sigue siendo muy común en el desarrollo diario. No tengo nada que hacer por la noche, así que encapsulo las funciones anteriores en Comportamientos en Atlas para facilitar su reutilización. Para obtener información sobre el comportamiento de Atlas, consulte: Creación de un comportamiento personalizado en ASP.NET Atlas.
Siguiendo los cinco pasos de personalización de este artículo sobre Creación de un comportamiento personalizado en ASP.NET Atlas, es fácil escribir este comportamiento. La parte más importante es el algoritmo para probar la seguridad de la contraseña. Fui flojo aquí y simplemente copié el código THIN por completo (hermano, no me regañes -_-b). Los amigos interesados pueden reconstruirlo en algo más parecido a "Atlas". . Esta función de detección se activará cada vez que el usuario presione una tecla en la entrada correspondiente:
function keyPressHandler() {
// puedes refactorizar esta parte para hacer que el código se parezca más a un Atlas :-)
var ContraseñaFuerza ={
Nivel: ["Alto, es muy alto", "Está bien", "Maldita sea, esto está bien"],
LevelValue: [30,20,0],//Valor de fuerza
Factor: [1,2,5],//Sumas de caracteres, respectivamente letras, números, otros
KindFactor: [0,0,10,20],//La contraseña contiene varios tipos de sumandos
Regex: [/[a-zA-Z]/g,/d/g,/[^a-zA-Z0-9]/g] //Caracteres de números regulares y otras reglas regulares
}
ContraseñaFuerza.FuerzaValue = función(contraseña)
{
var fuerzaValor = 0;
var TipoCompuesto = 0;
para(var i = 0; i < this.Regex.length;i++)
{
var caracteres = pwd.match(this.Regex[i]);
si (caracteres! = nulo)
{
StrengthValue += caracteres.longitud * this.Factor[i];
TipoCompuesto++;
}
}
strongValue += this.KindFactor[ComposedKind];
valor de fuerza de retorno;
}
ContraseñaFuerza.FuerzaNivel = función(contraseña)
{
valor var = this.StrengthValue(pwd);
for(var i = 0; i < this.LevelValue.length; i++)
{
si(valor >= this.LevelValue[i] )
devolver this.Level[i];
}
}
// final de la sección de refactorización
$(_checkResultLabelID).innerHTML = PasswordStrength.StrengthLevel(this.control.element.value);
}
Al mismo tiempo, el atributo checkResultLabelID se agrega a este comportamiento para especificar la etiqueta para mostrar los resultados de la prueba:
var _checkResultLabelID;
this.get_checkResultLabelID = función() {
devolver _checkResultLabelID;
}
this.set_checkResultLabelID = función (valor) {
si (_checkResultLabelID! = valor) {
_checkResultLabelID = valor;
this.raisePropertyChanged('checkResultLabelID');
}
}
También puede agregar fácilmente algunas funciones más sofisticadas, como cambiar el color de fondo del texto del mensaje para entradas de diferentes intensidades, etc. Para obtener el código fuente completo, consulte la descarga al final de este artículo.
Los pasos para realizar la prueba también son muy simples. Primero, agregue una referencia a este comportamiento en ScriptManager:
<atlas:ScriptManager runat="server" ID="ScriptManager1">.
<Guiones>
<atlas:ScriptReference Path="PasswordStrengthCheckBehavior.js" />
</scripts>
</atlas:ScriptManager>
Luego agregue una entrada a la página para ingresar la contraseña (el tipo no está configurado como contraseña en el programa de demostración) y un intervalo para mostrar los resultados de la prueba:
<div>
Introduzca una contraseña:
<entrada id="contraseña" tipo="texto" />
<span id="resultado"></span>
</div>
Finalmente, Atlas Script promueve la entrada anterior a un control Atlas y agrega el comportamiento que acabamos de escribir:
<script type="text/xml-script">
<página xmlns:script=" http://schemas.microsoft.com/xml-script/2005 ">
<componentes>
<textBox id="contraseña">
<comportamientos>
<contraseñaStrengthCheckBehavior checkResultLabelID="resultado" />
</comportamientos>
</cuadro de texto>
</componentes>
</página>
</script>
Es así de simple, de la siguiente manera en el navegador:
Contraseña simple:
Contraseña media:
Contraseña compleja:
El código fuente y los programas de muestra se pueden descargar aquí: