求助:关于密码显示和隐藏文本框如何判断的问题
请教各位大侠,我脑袋都想蒙了,也没搞明白,请指点,谢谢。输入密码文本框 两个一个是隐藏的,一个是显示。
确认密码文本框 也是两个,一个隐藏一个显示。
请问,如何判断输入密码文本框和确认密码文本框 内容一致呢?
另外,因为密码有显示和隐藏两个状态,且当用户编辑的时候,可能会出现在输入密码文本框(或确认密码文本框)显示和隐藏两个文本框内容不一致(隐藏状态输入密码后,用户选择显示密码文本框,后又修改该内容,此时隐藏状态的文本框和显示状态的文本框内容不一致),这个时候提交内容的时候,如何判断从后台获得的数据内容,是用户想要保存的内容呢?
举例如下: 输入密码文本框 客户在不显示状态下输入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>