zoukankan      html  css  js  c++  java
  • 验证密码和确认密码一致性

    需要jquery
    密码需要6-16位
    要求:不含有空格就行
    机制:
    1.第一次密码输入有不合规密码时,第二次密码提示字体变黄色警告,并永远是黄色。(边框和提示字体颜色一致,以下用提示字体代表)
    2.第一次密码输入不到6位,第二次密码提示字体变黄色警告,并永远是黄色。
    3.第一次密码输入正确(密码在6-16且没有空格),获得焦点时提示字体变蓝色表示聚焦该焦点。
    4.第二次密码输入和第一次密码一致时,提示字体变绿色表示两次密码输入一致。

    需要jquery
    密码需要6-16位
    要求:不含有空格就行
    机制:
    1.第一次密码输入有不合规密码时,第二次密码提示字体变黄色警告,并永远是黄色。(边框和提示字体颜色一致,以下用提示字体代表)
    2.第一次密码输入不到6位,第二次密码提示字体变黄色警告,并永远是黄色。
    3.第一次密码输入正确(密码在6-16且没有空格),获得焦点时提示字体变蓝色表示聚焦该焦点。
    4.第二次密码输入和第一次密码一致时,提示字体变绿色表示两次密码输入一致。
    ​1. [代码][JavaScript]代码  
    $(document).ready(function()
    {
        var info_pwflag=1;
        var info_apwflag=1;
     
        <!--第一次密码验证-->
     
        $("#pw").focus(function()
        {
            if($(this).val().length==0)
            {
                $(this).parent().css('border-color','#4DAFE4');
                $(".box_2 .info").css("color","#4DAFE4").text("请输入6-16位密码,不含空格!");
            }
            if(info_pwflag==1)
            {
                $(this).parent().css('border-color','#4DAFE4');
                $(".box_2 .info").css("color","#4DAFE4").text("请输入6-16位密码,不含空格!");
            }
            else
            {
                $(this).parent().css('border-color','red');
                    $(".box_2 .info").css("color","red").text("请输入6-16位密码,不含空格!");
            }
        });
        $("#pw").blur(function()
        {
            var temp=$(this).val();
            if(temp.length==0)
            {
                $(this).parent().css('border-color','red');
                $(".box_2 .info").css("color","red").text("请输入密码!");
            }
     
            else
            {
                if(info_pwflag==1)
                {
                    $(this).parent().css('border-color','#14BC3E');
                    $(".box_2 .info").css("color","#14BC3E").text("输入正确!");
                }
            }
            if(temp.length<6)
            {
                if(info_pwflag==1)
                {
                    $(this).parent().css('border-color','red');
                    $(".box_2 .info").css("color","red").text("请输入6-16位密码,不含空格!");
                    info_pwflag=0;
                }
            }
        });
        $("#pw").keyup(function(event)
        {http://www.huiyi8.com/tupian/​
            var info_user=$(this).val();
            if(info_user.length==0)
            {高清图片
                info_pwflag=1;
            }
            else
            {
                for(i=info_user.length-1;i>=0;i--)
                {
                    var temp=info_user.charAt(i);
                    if(temp==" ")
                    {
                        info_pwflag=0;
                        break;
                    }
                    else
                    {   
                        info_pwflag=1;
                         
                    }
                }
            }
            if(info_pwflag==1)
            {
                $(this).parent().css('border-color','#4DAFE4');
                $(".box_2 .info").css("color","#4DAFE4").text("请输入6-16位密码,不含空格!");
            }
            else
            {
                $(this).parent().css('border-color','red');
                    $(".box_2 .info").css("color","red").text("请输入6-16位密码,不含空格!");
            }       
        });
     
        <!--第二次密码验证-->
         
        $("#apw").focus(function()
        {
            if($(this).val().length==0)
            {
                if(info_pwflag==1)
                {
                    $(this).parent().css('border-color','#4DAFE4');
                    $(".box_3 .info").css("color","#4DAFE4").text("确认密码!");
                }
                else
                {
                    $(this).parent().css('border-color','#CAC21F');
                    $(".box_3 .info").css("color","#CAC21F").text("第一次密码输入不正确!");
                }
            }
            else
            {
                if(info_pwflag==1)
                {
                    if(info_apwflag==1)
                    {
                        $(this).parent().css('border-color','#4DAFE4');
                        $(".box_3 .info").css("color","#4DAFE4").text("确认密码正确!");
                    }
                    else
                    {
                        $(this).parent().css('border-color','red');
                        $(".box_3 .info").css("color","red").text("确认密码不正确!");
                    }
                }
                else
                {
                    $(this).parent().css('border-color','#CAC21F');
                    $(".box_3 .info").css("color","#CAC21F").text("第一次密码输入不正确!");
                }
            }
             
     
        });
        $("#apw").blur(function()
        {
            var temp=$(this).val();
            if(temp.length==0)
            {
                $(this).parent().css('border-color','red');
                $(".box_3 .info").css("color","red").text("请确认密码!");
            }
            else
            {
                if(info_pwflag==1)
                {
                    if(info_apwflag==1)
                    {
                        $(this).parent().css('border-color','#14BC3E');
                        $(".box_3 .info").css("color","#14BC3E").text("确认密码正确!");
                    }
                    else
                    {
                        $(this).parent().css('border-color','red');
                        $(".box_3 .info").css("color","red").text("确认密码不正确!");
                    }
                }
                else
                {
                    $(this).parent().css('border-color','#CAC21F');
                    $(".box_3 .info").css("color","#CAC21F").text("第一次密码输入不正确!");
                }
            }
        });
        $("#apw").keyup(function(event)
        {
            var info_user=$(this).val();
            var info_pw=$("#pw").val();
            if(info_pwflag==1)
            {
                if(info_user.length==0)
                {
                    info_apwflag=1;
                }
                else
                {
                    if(info_user==info_pw)
                    {
                        info_apwflag=1;
                    }
                    else
                    {
                        info_apwflag=0;
                    }
                }
            }
            //alert(info_pw);
            if(info_pwflag==1)
            {
                if(info_apwflag==1)
                {
                    $(this).parent().css('border-color','#4DAFE4');
                    $(".box_3 .info").css("color","#4DAFE4").text("确认密码正确!");
                }
                else
                {
                    $(this).parent().css('border-color','red');
                    $(".box_3 .info").css("color","red").text("确认密码不正确!");
                }
            }
            else
            {
                $(this).parent().css('border-color','#CAC21F');
                $(".box_3 .info").css("color","#CAC21F").text("第一次密码输入不正确!");
            }       
        });
    });

    2. [代码]html代码    
    <div class="box box_2">
                                <label class="item">密码</label>
                                <div class="login_bg pw_bg">
                                    <input id="pw" class="login_input pw" type="password" autocomplete="off" maxlength="16" tabindex="2">
                                </div>
                                <div class="info"></div>
                            </div>
                            <div class="box box_3">
                                <label class="item">确认密码</label>
                                <div class="login_bg apw_bg">
                                    <input id="apw" class="login_input apw" type="password" autocomplete="off" maxlength="16" tabindex="3">
                                </div>
                                <div class="info"></div>
                            </div>    

  • 相关阅读:
    566. Reshape the Matrix矩阵重排
    697. Degree of an Array 频率最高元素的最小覆盖子数组
    717. 1-bit and 2-bit Characters最后一位数是否为0
    189. Rotate Array 从右边开始翻转数组
    448. Find All Numbers Disappeared in an Array 寻找有界数组[1,n]中的缺失数
    268. Missing Number序列中遗失的数字
    C 练习实例20 – 小球自由下落
    menu (Elements) – HTML 中文开发手册
    HTML DOM Password form 属性
    fmal (Numerics) – C 中文开发手册
  • 原文地址:https://www.cnblogs.com/xkzy/p/3881401.html
Copyright © 2011-2022 走看看