> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 비밀번호 강도 확인 코드(2가지 방법)_javascript 기술

JavaScript 비밀번호 강도 확인 코드(2가지 방법)_javascript 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
풀어 주다: 2016-05-16 15:46:13
원래의
1563명이 탐색했습니다.

先看效果图:

javascript密码强度校验代码,具体实现思路不多说了,请看下面代码和demo。

第一种方法:

1

2

3

4

5

6

7

8

9

10

11

12

13

/*

 *密码安全程度

 *return :全部为字母或者数字,或者密码长度小于

 *return : 字母数字组成,或者字母特殊字符,或者数字和特殊字符

 *return : 字母和数字和特殊字符

 */

 String.prototype.passwordStrength=function(){

 if(this.length> && this.length<=) return ;

 var n = (this.search(/[a-zA-Z]/) != -) &#63; : ,

 n = (this.search(/[-]/) != -) &#63; : ,

 n =(this.search(/[\~\`\!\@\#\$\%\^\&\*\(\)\_\+\-\=\[\]|{\}\;\'\:\"\,\.\/\<\>\&#63;]{,}/) != -) &#63; : ;

 return n+n+n;

 }

로그인 후 복사

demo

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<!doctype html>

<html>

<head>

<meta charset="utf-">

<title>js密码强度</title>

<style type="text/css">

.pw_letter{ margin-top:px; font-size: px; }

.pw_letter label{float: left; margin-right:px; cursor: default; font-size: px; line-height: px;;}

.pw_letter span{ float: left; display:inline-block; width:px; height:px; line-height:px; text-align:center; color:#FFF; background-color:#ccc; border-left: px solid #FFF;}

.pw_letter span.pw_strength_color{ background-color:green;}

</style>

</head>

<body>

<input id="password" type="password" name="password" placeholder="密码" onKeyUp="setPasswordStrength(this.value.trim())">

<div class="pw_letter"><label>安全程度</label> <span class="strength">弱</span> <span class="strength">中</span> <span class="strength">强</span> </div>

<script type="text/javascript">

/*

*密码安全程度

*return :全部为字母或者数字,或者密码长度小于

*return : 字母数字组成,或者字母特殊字符,或者数字和特殊字符

*return : 字母和数字和特殊字符

*/

String.prototype.passwordStrength=function(){

if(this.length> && this.length<=) return ;

var n = (this.search(/[a-zA-Z]/) != -) &#63; : ,

n = (this.search(/[-]/) != -) &#63; : ,

n =(this.search(/[\~\`\!\@\#\$\%\^\&\*\(\)\_\+\-\=\[\]|{\}\;\'\:\"\,\.\/\<\>\&#63;]{,}/) != -) &#63; : ;

return n+n+n;

}

String.prototype.trim = String.prototype.trim || function(){

return this.replace(/^\s+|\s+$/g,"");

}

function setPasswordStrength(pwd){

var strength_span = document.getElementsByClassName("strength");

for(var i=; i<strength_span.length; i++){

 strength_span.item(i).className="strength";

}

for(var i=; i<pwd.passwordStrength(); i++){

 document.getElementsByClassName("strength").item(i).className="strength pw_strength_color";

}

}

</script>

</body>

로그인 후 복사

第二种方法:

javascript代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

<script>

function AuthPasswd(string) {

 if(string.length >=6) {

 if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string) && /\W+\D+/.test(string)) {

  noticeAssign(1);

 }else if(/[a-zA-Z]+/.test(string) || /[0-9]+/.test(string) || /\W+\D+/.test(string)) {

  if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string)) {

  noticeAssign(-1);

  }else if(/\[a-zA-Z]+/.test(string) && /\W+\D+/.test(string)) {

  noticeAssign(-1);

  }else if(/[0-9]+/.test(string) && /\W+\D+/.test(string)) {

  noticeAssign(-1);

  }else{

  noticeAssign(0);

  }

 }

 }else{

 noticeAssign(null);

 }

}

function noticeAssign(num) {

 if(num == 1) {

 $('#weak').css({backgroundColor:'#009900'});

 $('#middle').css({backgroundColor:'#009900'});

 $('#strength').css({backgroundColor:'#009900'});

 $('#strength').html('很强');

 $('#middle').html('');

 $('#weak').html('');

 }else if(num == -1){

 $('#weak').css({backgroundColor:'#ffcc33'});

 $('#middle').css({backgroundColor:'#ffcc33'});

 $('#strength').css({backgroundColor:''});

 $('#weak').html('');

 $('#middle').html('中');

 $('#strength').html('');

 }else if(num ==0) {

 $('#weak').css({backgroundColor:'#dd0000'});

 $('#middle').css({backgroundColor:''});

 $('#strength').css({backgroundColor:''});

 $('#weak').html('弱');

 $('#middle').html('');

 $('#strength').html('');

 }else{

 $('#weak').html(' ');

 $('#middle').html(' ');

 $('#strength').html(' ');

 $('#weak').css({backgroundColor:''});

 $('#middle').css({backgroundColor:''});

 $('#strength').css({backgroundColor:''});

 }

}

</script>

로그인 후 복사

以上通过两种方法介绍了javascript密码强度校验代码,希望对大家有所帮助。

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿