JavaScript实现密码安全级别

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

<title>用户密码安全级别验证title>

<meta content="用户密码安全级别验证" name="keywords" />

<meta content="用户密码安全级别验证" name="description" />

<link rel="icon" href="/images/favicon.ico" type="image/x-icon" />

<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />

<style type="text/css">

.password0 {background:#FF0000;}

.password1 {background:#FF9900;}

.password2 {background:#FFFF00;}

.password3 {background:#CCFF00;}

.password4 {background:#00FF00;}

.password5 {background:#0000FF;}

style>

head>

<body>

<label for="password">密码:label><input type="text" id="password" name="password" /><p id="cp" class="password0">p>

<script type="text/javascript" src="/js/jquery-1.6.1.min.js">script>

<script type="text/javascript">

function getPasswordSecurityLevel(password){

    return 0

    //密码长度大于5

    +( password.length > 5 )

    //密码含有字母

    +( /[a-z]/.test(password) && /[A-Z]/.test(password) )

    //密码含有字母和数字

    +( /\d/.test(password) && /\D/.test(password) )

    //密码含有特殊字符

    +( /[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/.test(password) && /\w/.test(password) )

    //密码长度大于12

    +( password.length > 12 );

}

function check() {

    var level = getPasswordSecurityLevel($("#password").val());

    jQuery("#cp").removeClass().addClass("password"+level) .html("密码安全级别:"+level);

}

jQuery(function(){

    jQuery("#password").bind('keyup', check).bind('blur', check);

});

script>

body>

html>

效果图

JavaScript实现密码安全级别_第1张图片JavaScript实现密码安全级别_第2张图片

JavaScript实现密码安全级别_第3张图片JavaScript实现密码安全级别_第4张图片

JavaScript实现密码安全级别_第5张图片JavaScript实现密码安全级别_第6张图片

转载于:https://www.cnblogs.com/wk0423/archive/2011/06/20/2084910.html

你可能感兴趣的:(JavaScript实现密码安全级别)