标题:求助:关于密码显示和隐藏文本框如何判断的问题
只看楼主
boyfuture
Rank: 1
等 级:新手上路
帖 子:552
专家分:0
注 册:2005-12-20
结帖率:88.89%
 问题点数:0 回复次数:2 
求助:关于密码显示和隐藏文本框如何判断的问题
请教各位大侠,我脑袋都想蒙了,也没搞明白,请指点,谢谢。
输入密码文本框 两个一个是隐藏的,一个是显示。
确认密码文本框 也是两个,一个隐藏一个显示。
请问,如何判断输入密码文本框和确认密码文本框 内容一致呢?
另外,因为密码有显示和隐藏两个状态,且当用户编辑的时候,可能会出现在输入密码文本框(或确认密码文本框)显示和隐藏两个文本框内容不一致(隐藏状态输入密码后,用户选择显示密码文本框,后又修改该内容,此时隐藏状态的文本框和显示状态的文本框内容不一致),这个时候提交内容的时候,如何判断从后台获得的数据内容,是用户想要保存的内容呢?

举例如下: 输入密码文本框  客户在不显示状态下输入12345,然后点击显示文本框后改为1234t ,然后在 确认密码文本框 输入数据,有可能在隐藏状态,也可能在显示状态文本框输入。  提交数据后,在后台如何判断,需要保存的数据,为最后编辑的数据呢?也就是显示的文本框的值呢? 如何用js判断哪个文本框属于隐藏状态还是显示状态呢?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="m. />
<meta name="applicable-device" content="mobile" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title></title>
<link href="../public.css" rel="stylesheet" type="text/css" />
<link href="../login.css" rel="stylesheet" type="text/css">
<link href="../main.css" rel="stylesheet" type="text/css">
<script src="../jquery.min.js"></script>
<script>
$(window).load(function() {
    $("#status").fadeOut();
    $("#preloader").delay(350).fadeOut("slow");
})
</script>
<style type="text/css">
.purplefont {
    line-height: 16px;
    color: #de3b8a;
    font-size: 14px;
}
</style>
</head>

<body leftmargin="0" rightmargin="0" topmargin="0" text-align: center; bgcolor="#FFFFFF">
                    <div class="item item-password">
          <input  class="txt-input txt-password ciphertext" type="password" placeholder="请输入密码,仅6位数字和字母组合" name="password" style="display: inline;" maxlength="6"  onpaste="return false" oncontextmenu="return false" oncopy="return false" oncut="return false"  onKeyUp="this.value=this.value.replace(/[^a-z0-9_]/g,'');" onblur=mycheck()>
          <input id="ptext"  class="txt-input txt-password plaintext" type="text" placeholder="请输入密码,仅6位数字和字母组合" style="display: none;" name="ptext" onKeyUp="this.value=this.value.replace(/[^a-z0-9_]/g,'');" maxlength="6"  onpaste="return false" oncontextmenu="return false" oncopy="return false" oncut="return false"  onblur=mychecktwo()>
          <b class="tp-btn btn-off"></b> </div>
           <div id="pscheck" style="position:relative;display: none; margin-right:15px; width:100%;  z-index:0;border: 0px none #000000;  " left: 0px; top:0px; class="purplefont"  >密码不能少于6位数!</div>
           <div id="psnucheck" style="position:relative;display: none; margin-right:15px; width:100%;  z-index:0;border: 0px none #000000; " left: 0px; top:0px; class="purplefont" >密码不能全部为数字!</div>
        <div class="item item-password">
          <input  class="txt-input txt-password_PwdTwo ciphertext_PwdTwo" type="password" placeholder="确认密码" name="pstwo" style="display: inline;" onKeyUp="this.value=this.value.replace(/[^a-z0-9_]/g,'');" maxlength="6" onblur=mycheckdata()>
          <input  class="txt-input txt-password_PwdTwo plaintext_PwdTwo" type="text" placeholder="确认密码" style="display: none;" name="pstwotext" onKeyUp="this.value=this.value.replace(/[^a-z0-9_]/g,'');" maxlength="6" onblur=mycheckdata()>
          <b class="tp-btn_PwdTwo btn-off_PwdTwo"></b> </div>
         
           <div id="repscheck" style="position:relative;display: none; margin-right:15px; width:100%;  z-index:0;border: 0px none #000000; " left: 0px; top:0px; class="purplefont" >两次输入的密码不一致!</div>
           
      
      </form>
</body>
</html>
<script type="text/javascript" >
    $(function() {
        $(".input-close").hide();
        displayPwd();
        displayPwd_PwdTwo();
        displayClearBtn();
        setTimeout(displayClearBtn, 200 ); //延迟显示,应对浏览器记住密码
    });   

    //是否显示清除按钮
    function displayClearBtn(){
        if(document.getElementById("username").value != ''){
            $("#username").siblings(".input-close").show();
        }
        if(document.getElementById("password").value != ''){
            $(".ciphertext").siblings(".input-close").show();
        }
        if(document.getElementById("password_PwdTwo").value != ''){
            $(".ciphertext_PwdTwo").siblings(".input-close").show();
        }
    }

    //清除input内容
    $('.input-close').click(function(e){  
        $(e.target).parent().find(":input").val("");
        $(e.target).hide();
        $($(e.target).parent().find(":input")).each(function(i){
            if(this.id=="ptext" || this.id=="password"){
                $("#password").val('');
                $("#ptext").val('');
            }
            if(this.id=="ptext_PwdTwo" || this.id=="password_PwdTwo"){
                $("#password_PwdTwo").val('');
                $("#ptext_PwdTwo").val('');
            }
         });
    });  
   
    //设置password字段的值   
    $('.txt-password').bind('input',function(){
        $('#password').val($(this).val());
    });
    $('.txt-password_PwdTwo').bind('input',function(){
        $('#password_PwdTwo').val($(this).val());
    });
   
    //显隐密码切换
    function displayPwd(){
        $(".tp-btn").toggle(
          function(){
            $(this).addClass("btn-on");
            var textInput = $(this).siblings(".plaintext");
            var pwdInput = $(this).siblings(".ciphertext");
            pwdInput.hide();
            textInput.val(pwdInput.val()).show().focusEnd();
          },
          function(){
              $(this).removeClass("btn-on");
              var textInput = $(this).siblings(".plaintext");
            var pwdInput = $(this).siblings(".ciphertext");
            textInput.hide();
            pwdInput.val(textInput.val()).show().focusEnd();
          }
        );
    }
    //显隐密码切换
    function displayPwd_PwdTwo(){
        $(".tp-btn_PwdTwo").toggle(
          function(){
            $(this).addClass("btn-on_PwdTwo");
            var textInput = $(this).siblings(".plaintext_PwdTwo");
            var pwdInput = $(this).siblings(".ciphertext_PwdTwo");
            pwdInput.hide();
            textInput.val(pwdInput.val()).show().focusEnd();
          },
          function(){
              $(this).removeClass("btn-on_PwdTwo");
              var textInput = $(this).siblings(".plaintext_PwdTwo");
            var pwdInput = $(this).siblings(".ciphertext_PwdTwo");
            textInput.hide();
            pwdInput.val(textInput.val()).show().focusEnd();
          }
        );
    }
   
    //监控用户输入
    $(":input").bind('input propertychange', function() {
        if($(this).val()!=""){
            $(this).siblings(".input-close").show();
        }else{
            $(this).siblings(".input-close").hide();
        }
    });
</script>
<script language="javascript">
function opennamecheckno()
{
    document.getElementById("namecheck").style.display="none"
    }
function opennamecheck()
{
document.getElementById("namecheck").style.display="block"
}
</script>
<script language="javascript">
function mycheck(){
if(document.form1.password.value.length<6)
{
document.getElementById("psnucheck").style.display="none"
document.getElementById("pscheck").style.display="block";return false;
}

if (isNaN(document.form1.password.value)!=true &&document.form1.password.value.length==6)
{
document.getElementById("pscheck").style.display="none"
document.getElementById("psnucheck").style.display="block";return false;
}
if (isNaN(document.form1.password.value)&&document.form1.password.value.length==6)
{
document.getElementById("pscheck").style.display="none"
document.getElementById("psnucheck").style.display="none"
}

}

</script>
<script language="javascript">
function mycheckdata(){
   
if(form1.password.value ==""&& form1.ptext.value ==""  && form1.pstwo.value=="" && form1.pstwotext.value==""   )
    {
document.getElementById("repscheck").style.display="none"
}

if(form1.pstwo.value !="" && form1.password.value  != form1.pstwo.value  )
    {
document.getElementById("repscheck").style.display="block"
}
else
{
document.getElementById("repscheck").style.display="none"
}
if(form1.pstwotext.value !="" && form1.password.value != form1.pstwotext.value  )
    {

document.getElementById("repscheck").style.display="block"
}
else
{

document.getElementById("repscheck").style.display="none"
}
}
function mychecktwo(){
if (document.form1.ptext.value.length<6)
{
document.getElementById("psnucheck").style.display="none"
document.getElementById("pscheck").style.display="block";return false;
}
if (isNaN(document.form1.ptext.value)!=true &&document.form1.ptext.value.length==6)
{
document.getElementById("pscheck").style.display="none"
document.getElementById("psnucheck").style.display="block";return false;
}
if (isNaN(document.form1.ptext.value)&&document.form1.ptext.value.length==6)
{
document.getElementById("pscheck").style.display="none"
document.getElementById("psnucheck").style.display="none"
}}
</script>
搜索更多相关主题的帖子: style display this value document 
2018-12-01 15:57
boyfuture
Rank: 1
等 级:新手上路
帖 子:552
专家分:0
注 册:2005-12-20
得分:0 
这个内容,只适用于IE6 ,手机或其他QQ浏览器都不支持,问题在哪?
function mycheckdata(){
    var password = document.getElementById('password');
    var ptext = document.getElementById('ptext');
    var pstwo = document.getElementById('pstwo');
    var pstwotext = document.getElementById('pstwotext');
if ( password.style.display == "none" && pstwo.style.display == "none" && form1.password.value  != form1.pstwo.value )
{
document.getElementById("repscheck").style.display="block";return false;
}
if ( password.style.display == "inline" && pstwo.style.display == "inline" && form1.password.value  == form1.pstwo.value )
{
document.getElementById("repscheck").style.display="none"
}
2018-12-01 17:07
boyfuture
Rank: 1
等 级:新手上路
帖 子:552
专家分:0
注 册:2005-12-20
得分:0 
已经解决,谢谢。
2018-12-02 18:06



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-491731-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.126543 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved