zoukankan      html  css  js  c++  java
  • 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%;}
    View Code

    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>

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

  • 相关阅读:
    Spring Security 3.2.x与Spring 4.0.x的Maven依赖管理
    文件下载-SpringMVC中測试
    Redhat 6.3中syslog信息丢失
    HDU2586 How far away ?(LCA模板题)
    android开机启动应用和服务
    swift 3.0基本数据语法
    swift 获取UI上某点点颜色
    Hello_IOS ios开发transform属性
    CGAffineTransformMakeTranslation和CGAffineTransform
    iOS 原生地图(MapKit、MKMapView)轨迹渐变
  • 原文地址:https://www.cnblogs.com/Sinhtml/p/4080477.html
Copyright © 2011-2022 走看看