我的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("     密码不能为空,请输入密码");

                    flag = false;

                }else if(standard.test(value) == false){

                    $pwdTip.removeClass().addClass("tipWrongStyle").html("     密码格式不正确，请检查后重新输入");

                    flag = false;

                }else{

                    $pwdTip.removeClass().addClass("tipRightStyle").html("     密码输入正确");

                }

    return flag;

｝

$("[name=userPwd]").bind({

        focus:function(){

            //点击时变成密码输入框，以便未点击时在框中显示"您的密码"的提示

            this.type="password";

            $("#pwdTip").removeClass().addClass("tipNormalStyle").html("     请输入8-16位密码，仅支持字母、数字以及下划线");

        },

        blur:function(){

            if(this.value == "您的密码"){

                this.type="text";

            }

            judge($(this));

        }

    });

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