저자: Dflying Chen ( http://dflying.cnblogs.com/ )
이 기사는 수학적 방법을 사용하여 논리적 판단을 구현하는 어려움을 크게 줄이는 비타민 C.net의 기사에서 파생되었습니다. 감지 코드는 비밀번호 강도를 확인하기 위한 THIN의 JS 클래스에서 가져옵니다.
Atlas는 클라이언트 측 JavaScript의 강력한 객체 지향 기능을 제공합니다. 저는 지난 며칠 동안 위의 두 게시물을 보았고 이 기능적 요구 사항이 일상적인 개발에서 여전히 매우 일반적이라고 생각합니다. 밤에는 할 일이 없기 때문에 쉽게 재사용할 수 있도록 위의 기능을 Atlas의 동작으로 캡슐화했습니다. Atlas의 동작에 대한 자세한 내용은 ASP.NET Atlas에서 사용자 지정 동작 만들기를 참조하세요.
ASP.NET Atlas에서 사용자 지정 동작 만들기에 대한 이 문서의 5가지 사용자 지정 단계를 따르면 이 동작을 쉽게 작성할 수 있습니다. 가장 중요한 부분은 비밀번호 강도를 테스트하기 위한 알고리즘입니다. 여기서는 게을러서 THIN 코드를 완전히 복사했습니다. (형님, 꾸짖지 마세요 -_-b) 관심 있는 친구들은 좀 더 "Atlas" 모양으로 재구성할 수 있습니다. . 이 감지 기능은 사용자가 해당 입력에서 키를 누를 때마다 실행됩니다.
function keyPressHandler() {
// 코드를 'Atlas와 유사'하게 만들기 위해 이 부분을 리팩터링할 수 있습니다. :-)
var 비밀번호 강도 ={
Level: ["높아, 정말 높아", "괜찮아", "젠장, 괜찮아"],
LevelValue: [30,20,0],//강도 값
인수: [1,2,5],//문자 추가, 각각 문자, 숫자, 기타
KindFactor: [0,0,10,20],//비밀번호에는 여러 유형의 가수가 포함되어 있습니다.
정규식: [/[a-zA-Z]/g,/d/g,/[^a-zA-Z0-9]/g] //문자 정규 숫자 및 기타 정규 규칙
}
PasswordStrength.StrengthValue = 함수(pwd)
{
var 강도값 = 0;
var ComposedKind = 0;
for(var i = 0; i < this.Regex.length;i++)
{
var chars = pwd.match(this.Regex[i]);
if(문자 != null)
{
StrengthValue += chars.length * this.Factor[i];
ComposedKind++;
}
}
StrengthValue += this.KindFactor[ComposedKind];
강도값을 반환합니다.
}
PasswordStrength.StrengthLevel = 함수(pwd)
{
var value = this.StrengthValue(pwd);
for(var i = 0; i < this.LevelValue.length; i++)
{
if(값 >= this.LevelValue[i] )
return this.레벨[i];
}
}
// 리팩토링 섹션 끝
$(_checkResultLabelID).innerHTML = PasswordStrength.StrengthLevel(this.control.element.value);
}
동시에 테스트 결과를 표시하기 위한 레이블을 지정하기 위해 checkResultLabelID 속성이 이 동작에 추가됩니다.
var _checkResultLabelID;
this.get_checkResultLabelID = function() {
_checkResultLabelID를 반환합니다.
}
this.set_checkResultLabelID = 함수(값) {
if (_checkResultLabelID != 값) {
_checkResultLabelID = 값;
this.raisePropertyChanged('checkResultLabelID');
}
}
다양한 강도의 입력에 대한 프롬프트 텍스트의 배경색 변경 등과 같은 좀 더 멋진 기능을 쉽게 추가할 수도 있습니다. 전체 소스 코드를 보려면 이 기사 끝에 있는 다운로드를 참조하세요.
테스트 단계도 매우 간단합니다. 먼저 ScriptManager에서 이 동작에 대한 참조를 추가합니다.
<atlas:ScriptManager runat="server" ID="ScriptManager1">
<스크립트>
<atlas:ScriptReference Path="PasswordStrengthCheckBehavior.js" />
</스크립트>
</atlas:ScriptManager>
그런 다음 비밀번호(데모 프로그램에서는 유형이 비밀번호로 설정되지 않음)를 입력하기 위한 입력과 테스트 결과를 표시하기 위한 범위를 페이지에 추가합니다.
<div>
비밀번호를 입력하세요:
<입력 id="password" type="text" />
<span id="결과"></span>
</div>
마지막으로 Atlas 스크립트는 위 입력을 Atlas 컨트롤로 승격하고 방금 작성한 동작을 추가합니다.
<script type="text/xml-script">
<페이지 xmlns:script=" http://schemas.microsoft.com/xml-script/2005 ">
<구성요소>
<textBox id="비밀번호">
<행동>
<passwordStrengthCheckBehavior checkResultLabelID="result" />
</행동>
</textBox>
</구성요소>
</page>
</script>
브라우저에서 다음과 같이 간단합니다.
간단한 비밀번호:
중간 비밀번호:
복잡한 비밀번호:
소스 코드와 샘플 프로그램은 여기에서 다운로드할 수 있습니다.