学步园

部分内容参考:http://www.shaoqun.com/a/59656.aspx

提示框的CSS样式:

<style type="text/css">
        #DivTips
        {
            float: left;
            margin: 2px 0 0 20px;
        }
        #DivTips span
        {
            float: left;
            width: 50px;
            height: 20px;
            color: #fff;
            overflow: hidden;
            background: #ccc;
            margin-right: 2px;
            line-height: 20px;
            text-align: center;
        }
        #DivTips.s1 .active
        {
            background: #f30;
        }
        #DivTips.s2 .active
        {
            background: #fc0;
        }
        #DivTips.s3 .active
        {
            background: #cc0;
        }
        #DivTips.s4 .active
        {
            background: #090;
        }
    </style>

验证密码强度的JS函数:

//检测密码强度        
function checkStrong(sValue) {
    var modes = 0;
    if (sValue.length < 6) return modes;
    if (/\d/.test(sValue)) modes++; //数字            
    if (/[a-z]/.test(sValue)) modes++; //小写            
    if (/[A-Z]/.test(sValue)) modes++; //大写             
    if (/\W/.test(sValue)) modes++; //特殊字符            
    switch (modes) {
        case 1:
            return 1;
            break;
        case 2:
            return 2;
        case 3:
        case 4:
            return sValue.length < 12 ? 3 : 4
            break;
    } 
}    

给 客户端添加 触发事件：

<script type="text/javascript">        
window.onload = function () {            
var oTips = document.getElementById("tips");            
var oInput = document.getElementsByTagName("input")[0];            
var aSpan = oTips.getElementsByTagName("span");            
var aStr = ["弱", "中", "强", "非常好"];            
var i = 0;
oInput.onkeyup = oInput.onfocus = oInput.onblur = function () {                
var index = checkStrong(this.value);                
this.className = index ? "correct" : "error";                
oTips.className = "s" + index;                
for (i = 0; i < aSpan.length; i++) aSpan[i].className = aSpan[i].innerHTML = "";                
index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1])             }         };        

如果是DX控件的话 就更简单了：

文本框添加事件代码：

<ClientSideEvents KeyUp="function(s, e) {
	CheckComposerPw()
}" />

JS ：

function CheckComposerPw() {
    var oTips = document.getElementById("DivTips");
    var aSpan = oTips.getElementsByTagName("span");
    var aStr = ["弱", "中", "强", "非常好"];
    var i = 0;
    var index = checkStrong(txtComposerPwd.GetText());
    this.className = index ? "correct" : "error";
    oTips.className = "s" + index;
    for (i = 0; i < aSpan.length; i++) aSpan[i].className = aSpan[i].innerHTML = "";
    index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1]);
}