jQuery实现表单验证

填写表单信息时的效果：

初始表单提交效果：

实现

css代码：

.focus{
    padding: 2px 0 2px 5px;
    border: solid 1px #FF66CC;
    }
.blur{
    padding: 2px 0 2px 18px;
    border: solid 1px red;
    background: #ffff99 url(../imges/warn.png) no-repeat 2px center;
    }
.success{
    padding: 2px 0 2px 18px;
    border: solid 1px green;
    background: url(../imges/ok.png) no-repeat 2px center;
    }
.show
    {
    z-index: auto;
    display: none;
    position:absolute;
    width: 276px;
    height: 35px;
    overflow: hidden;
    text-indent: 5px;
    line-height: 40px;
    font-size: 12px;
    font-family: Arial;
    background: url(../imges/over.gif) no-repeat left top;
    opacity:0.9;
    filter: alpha(opacity=90);
    }

 

 js代码：

$(function(){
    $('body').append('<div class="show"></div>');
    $(document).mouseover(function(){$('.show').hide();});
    $("input,textarea").each(function(){
        var j = $(this);
        var tip = j.attr('tip');
        if(tip != undefined)
        {
            $("<span>&nbsp;"+tip+"</span>").css("color","#ccc").insertAfter(j);
            if(j.is(":text,:password"))
            {
                j.focus(function(){
                    if(!j.hasClass("success")){
                        j.Focus();
                        $(".show").html(j.NullError()).css({left:j.offset().left,top:j.offset().top+20}).fadeIn();
                        if(j.val() == j.NullError())
                           j.val("");
                    }
                }).blur(function(){
                    var Reg = new RegExp(j.attr("reg"));
                    if(Reg.test(j.val())){
                        j.Success();
                    }else{
                        j.Blur();
                        if(j.val().length==0 && j.is(":text")){
                            j.val(j.NullError());
                        }
                    }
                });
            }
        }
    });
    
    $('form').submit(function(){
        var isSubmit = true;
        $(this).find('input').each(function(){
            var thisReg = new RegExp($(this).attr('reg'));
            if(!thisReg.test(this.value))
            {
                $(this).blur();
                isSubmit = false;
            }
        });
        return isSubmit;
    } ); 
    
    $.fn.extend({
        Focus:      function(){this.removeClass("blur").removeClass("success").addClass("focus");},
        Blur:       function(){this.removeClass("focus").removeClass("success").addClass("blur");},
        Success:    function(){this.removeClass("focus").removeClass("blur").addClass("success");},
        NullError:  function(){return this.attr("nullError")==undefined?"":this.attr("nullError");}
    }); 
});

 

htm源代码：

<input type="text" reg="\w{6,12}" tip="以字母开头，6~12字符,不能含特殊字符" nullError="请输入用户名" />
<input type="text" reg="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" tip="邮箱必须有效" nullError="请输入邮箱" />