Autor: Dflying Chen ( http://dflying.cnblogs.com/ )
Dieser Artikel basiert auf einem Artikel auf Vitamin C.net, der mathematische Methoden verwendet, um die Schwierigkeit, ein logisches Urteil umzusetzen, erheblich zu reduzieren. Der Erkennungscode stammt aus der JS-Klasse von THIN zur Überprüfung der Passwortstärke.
Atlas bietet leistungsstarke objektorientierte Funktionen für clientseitiges JavaScript. Ich habe die Beiträge der beiden oben genannten in den letzten Tagen gesehen und bin der Meinung, dass diese funktionale Anforderung in der täglichen Entwicklung immer noch weit verbreitet ist. Da ich nachts nichts zu tun habe, kapsele ich die oben genannten Funktionen zur einfachen Wiederverwendung in Verhaltensweisen in Atlas ein. Informationen zum Verhalten von Atlas finden Sie unter: Erstellen von benutzerdefiniertem Verhalten in ASP.NET Atlas.
Wenn Sie die fünf Anpassungsschritte in diesem Artikel zum Erstellen eines benutzerdefinierten Verhaltens im ASP.NET Atlas befolgen, ist es einfach, dieses Verhalten zu schreiben. Der wichtigste Teil ist der Algorithmus zum Testen der Passwortstärke und habe den THIN-Code einfach komplett kopiert (Bruder, schimpfe nicht mit mir -_-b). . Diese Erkennungsfunktion wird jedes Mal ausgelöst, wenn der Benutzer eine Taste in der entsprechenden Eingabe drückt:
function keyPressHandler() {
// Sie können diesen Teil umgestalten, um den Code „Atlas-ähnlicher“ zu machen :-)
var PasswordStrength ={
Level: [„Hoch, es ist wirklich hoch“, „Es ist okay“, „Verdammt, das ist okay“],
LevelValue: [30,20,0],//Stärkewert
Faktor: [1,2,5],//Zeichenzusätze, bzw. Buchstaben, Zahlen, andere
KindFactor: [0,0,10,20],//Das Passwort enthält mehrere Arten von Addends
Regex: [/[a-zA-Z]/g,/d/g,/[^a-zA-Z0-9]/g] //Zeichen für reguläre Zahlen und andere reguläre Regeln
}
PasswordStrength.StrengthValue = function(pwd)
{
var StrengthValue = 0;
var ComposedKind = 0;
for(var i = 0; i < this.Regex.length;i++)
{
var chars = pwd.match(this.Regex[i]);
if(chars != null)
{
StrengthValue += chars.length * this.Factor[i];
ComposedKind++;
}
}
StrengthValue += this.KindFactor[ComposedKind];
return StrengthValue;
}
PasswordStrength.StrengthLevel = function(pwd)
{
var value = this.StrengthValue(pwd);
for(var i = 0; i < this.LevelValue.length; i++)
{
if(value >= this.LevelValue[i] )
return this.Level[i];
}
}
// Ende des Refactoring-Abschnitts
$(_checkResultLabelID).innerHTML = PasswordStrength.StrengthLevel(this.control.element.value);
}
Gleichzeitig wird diesem Verhalten das Attribut checkResultLabelID hinzugefügt, um das Label für die Anzeige der Testergebnisse anzugeben:
var _checkResultLabelID;
this.get_checkResultLabelID = function() {
return _checkResultLabelID;
}
this.set_checkResultLabelID = function(value) {
if (_checkResultLabelID != value) {
_checkResultLabelID = value;
this.raisePropertyChanged('checkResultLabelID');
}
}
Sie können auch problemlos einige weitere ausgefallene Funktionen hinzufügen, z. B. das Ändern der Hintergrundfarbe des Eingabeaufforderungstexts für Eingaben unterschiedlicher Stärke usw. Den vollständigen Quellcode finden Sie im Download am Ende dieses Artikels.
Die Schritte zum Testen sind ebenfalls sehr einfach. Fügen Sie zunächst einen Verweis auf dieses Verhalten in ScriptManager hinzu:
<atlas:ScriptManager runat="server" ID="ScriptManager1">
<Skripte>
<atlas:ScriptReference Path="PasswordStrengthCheckBehavior.js" />
</Skripte>
</atlas:ScriptManager>
Fügen Sie dann der Seite eine Eingabe hinzu, um das Passwort einzugeben (Typ ist im Demoprogramm nicht auf Passwort eingestellt), und einen Bereich, um die Testergebnisse anzuzeigen:
<div>
Geben Sie ein Passwort ein:
<input id="password" type="text" />
<span id="result"></span>
</div>
Schließlich wandelt Atlas Script die obige Eingabe in ein Atlas-Steuerelement um und fügt das Verhalten hinzu, das wir gerade geschrieben haben:
<script type="text/xml-script">
<page xmlns:script=" http://schemas.microsoft.com/xml-script/2005 ">
<Komponenten>
<textBox id="password">
<Verhalten>
<passwordStrengthCheckBehavior checkResultLabelID="result" />
</behaviors>
</textBox>
</components>
</page>
</script>
So einfach geht's, wie folgt im Browser:
Einfaches Passwort:
Mittleres Passwort:
Komplexes Passwort:
Quellcode und Beispielprogramme können hier heruntergeladen werden: