jQuery封装的表单验证，模仿网易或者腾讯登录的风格

模仿网易邮箱做了一个登录表单验证，不太好，请指教

上代码

<form action="" name="" id="form1">
<div class="changepwd">
    <ul>
        <li>
            <input type="text" class="text_100per" value="">
            <p>请填写用户名，会员名不能为空</p>
            <span>昵称</span>
        </li>
        <li>
            <input type="text" class="text_100per" value="">
            <p>请填写邮箱，不能为空</p>
            <span>邮箱</span>
        </li>
        <li>
            <input type="text" class="text_100per" value="">
            <p>请填写密码，不能为空</p>
            <span>密码</span>
        </li>
        <li>
            <input type="text" class="text_100per" value="">
            <p>请再次填写密码，不能为空</p>
            <span>确认密码</span>
        </li>
        
        <li>
            <input type="text" class="text_100per" value="">
            <p></p>
            <span>确认新密码</span>
        </li>
        <li class="validtext"><input type="text" class="text_40per" value="验证码" onBlur="if(this.value==''){this.value='验证码'}" onFocus="if(this.value=='验证码'){this.value=''}"> <img src="valid.jpg"><div class="clear"></div></li>
        <li class="maksure"><input type="image" class="imp" src="images/changepwd.jpg" alt="确定修改" title="确定修改"></li>
    </ul>
</div>
</form>

css

.changepwd {width:94%;margin:12px auto 12px;}
.changepwd ul {}
.changepwd ul li {height:auto;position:relative;padding-bottom:5px;}
.changepwd ul li p {font:12px/20px Helvetica;color:#999;}
.changepwd ul li span {display:block;position:absolute;left:0;top:0;z-index:-1;color:#333;padding:0 3%;width:94%;font:14px/34px Helvetica;color:#333;}
.maksure {padding-top:12px;}
.maksure .imp {display:block;width:100%;}

 

js

(function($){
    $.fn.beauForm = function(){
        var beau = function(arg){
            var argOli = arg.find('li');
            argOli.each(function(index,element){
                var _this = $(this);
                var oInp = $(this).find('input') || $(this).find('textarea');
                var oTex = $(this).find('textarea');
                oInp.focus(function(e) {
                    if(oInp.val() == '' || oTex.text() == ''){
                        _this.find('span').css({'color':'#aaa'});
                        _this.find('p').css({'color':'#f00'});
                        _this.find('input').css({'border':'solid 1px #f00'});
                    }
                    else{
                        _this.find('span').text('');
                        _this.find('p').css({'color':'#999'});
                        _this.find('input').css({'border':'solid 1px #ccc'});
                    }
                });
                $(document).keyup(function(e) {
                    if(oInp.val() != ''){
                        _this.find('span').text('');
                        _this.find('p').css({'color':'#999'});
                        _this.find('input').css({'border':'solid 1px #ccc'});
                    }else{
                        _this.find('span').text('');
                        _this.find('p').css({'color':'#999'});
                        _this.find('input').css({'border':'solid 1px #ccc'});
                    }
                });
                oInp.blur(function(e) {
                    if(oInp.val() == '' || oTex.text() == ''){
                        _this.find('span').css({'color':'#333'});
                        _this.find('span').text(tex);
                        _this.find('p').css({'color':'#f00'});
                        _this.find('input').css({'border':'solid 1px #f00'});
                    }else{
                        _this.find('span').text('');
                        _this.find('p').css({'color':'#999'});
                        _this.find('input').css({'border':'solid 1px #ccc'});
                    }
                });    
                
            });
            var Inp = 'mc';
        };
        
        return $(this).each(function(index, element) {
            beau($(this));
        });    
    };
})(jQuery);    

调用：

<script src="js/beauForm.js"></script>
<script>
    

    $('#form1').beauForm();

</script>

还行，赶时间做了一个，知道不太完美不过还得接着完善
哪位好心哥哥帮提提意见也成 ^_^