我的Web学习之路2——密码框的提示与表单验证

jsp中部分代码：<div>
                                    <span><label>密码</label><label id="pwdTip"></label></span>
                                    <span><input name="userPwd" type="text" class="textBox" value="您的密码"></span>

                                </div>

css代码：

.tipNormalStyle {
    color: orange;
}
.tipWrongStyle {
    color: red;
}
.tipRightStyle {
    color: green;
}

js代码：

function judge($toBeJudged){
        var flag = true;    //用于判断
        var name = $toBeJudged.attr("name");   //attr获取选中元素的属性值
        var value = $toBeJudged.val();    //获取选中元素的内容

        var $pwdTip = $("#pwdTip");
                var standard = /^[0-9a-zA-Z_]{8,16}$/;
                if(value == "您的密码"){
                    $pwdTip.removeClass().addClass("tipWrongStyle").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码不能为空,请输入密码");
                    flag = false;
                }else if(standard.test(value) == false){
                    $pwdTip.removeClass().addClass("tipWrongStyle").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码格式不正确，请检查后重新输入");
                    flag = false;
                }else{
                    $pwdTip.removeClass().addClass("tipRightStyle").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码输入正确");
                }

    return flag;

｝

$("[name=userPwd]").bind({
        focus:function(){
            //点击时变成密码输入框，以便未点击时在框中显示"您的密码"的提示
            this.type="password";
            $("#pwdTip").removeClass().addClass("tipNormalStyle").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请输入8-16位密码，仅支持字母、数字以及下划线");
        },
        blur:function(){
            if(this.value == "您的密码"){
                this.type="text";
            }
            judge($(this));
        }
    });

下面是实现出来的效果：                                        Tips：图片中在CSS里有进一步美化，为了节省篇幅省略了文本框和小图标的美化，但基本功能已经能够实现