如果填充了三个输入并且两个特定的输入相等,则会更改按钮样式;除非不删除“不等于”输入的值,否则它可以工作

If three input are filled and two specific ones are equal it changes button style; it works, unless value of 'not equal' input is not deleted

本文关键字:输入 不等于 删除 填充 工作 样式 两个 三个 如果 按钮      更新时间:2023-09-26

function validatePW()
{
	var r_pw=document.getElementById('register_password').value;
	var r_cpw=document.getElementById('register_confirmpw').value;
	var r_button=document.getElementById('register_button');
	var r_user=document.getElementById('register_username').value;
	if(r_cpw)
	{
		if (r_pw == r_cpw)
		{
			document.getElementById('message_alert').innerHTML='';
			if(r_user)
			{
				r_button.disabled = false;
				r_button.style.opacity = 1;
			}
		}else{
			document.getElementById('message_alert').innerHTML='doesnt match';
			r_button.disabled = true;
			r_button.style.opacity = 0.5;
		}
	}
}
document.getElementById('register_username').onkeyup = function()
{
	validatePW();
}
document.getElementById('register_confirmpw').onkeyup = function()
{
	validatePW();
}
document.getElementById('register_password').onkeyup = function()
{
	validatePW();
}
.headline
{
	padding-bottom:1px;
	margin-bottom:25px;
	text-align:center;
	box-shadow:0 1px 0 #bbbbbb;
}
.content
{
	display:inline-block;
	padding:10px 30px 30px 30px;
	margin:10px 50px;
	background:#eeeeee;
	border-radius:3px;
	border:1px solid #bbbbbb;
}
.center
{
	width: 100%;
	position: absolute;
	top: 50%;
	text-align:center;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
h1
{
	display:inline-block;
	font-weight:400;
}
.sign_up_input
{
	float:left;
	margin-left:-2px;
}
.sign_up_input input
{
	line-height:24px;
	border-radius: 0 3px 3px 0;
	border:1px solid #bbbbbb;
}
.sign_up_icon
{
	float:left;
	display:inline-block;
}
.sign_up_icon div
{
	padding:1px 9px 0 9px;
	background:#ddd;
	border-radius:3px 0 0 3px;
	border:1px solid #bbbbbb;
	height:25px;
	box-shadow:inset -2px -3px 4px rgba(0, 0, 0, 0.025);
}
#register_button
{
	width:218px;
	padding:1px 0;
	font-size:18px;
	background:#dddddd;
	border-radius:3px;
	border:1px solid #bbbbbb;
	opacity:0.5;
}
#register_button:active
{
	box-shadow:inset 0px 1px 1px rgba(0, 0, 0, 0.075);
}
#message_alert
{
	float:left;
	margin-top:3px;
	font-size:12px;
}
		<div class="center">
			<div>
                <div class="content">
					<div class="headline"><h1>REGISTER</h1></div>
					<div class="sign_up_icon"><div><img src="" style="height:22px; margin:1px 2px;"/></div></div>
					<div class="sign_up_input"><input type='text' name='register_username' id='register_username' maxlength="64"/></div><br><br>
					<div class="sign_up_icon"><div><img src="" style="height:26px; margin-top:-1px;"/></div></div>
					<div class="sign_up_input"><input type="password" name="register_password" id="register_password" maxlength="64"/></div><br><br>
					<div class="sign_up_icon"><div style="padding:1px 2px 0 9px;"><img src="" style="height:26px; margin-top:-1px;"/><span style="display:inline-block; font-size:13px; line-height:32px; vertical-align:top; margin-left:-3px">✔</span></div></div>
					<div class="sign_up_input"><input type="password" name="register_confirmpw" id="register_confirmpw" maxlength="64"/></div><br><br>
					<span id="message_alert"></span><br><br>
					<a href="#"><input id="register_button" type="button" value="Register" onclick="return regformhash(this.form, this.form.username, this.form.email, this.form.password, this.form.confirmpwd); disabled"/></a>
				</div>
            </div>
        </div>

问题就在这里:

if(r_user)
{
    r_button.disabled = false;
    r_button.style.opacity = 1;
}
如果您正常输入输入,

它会完美运行,除非您删除第一个输入的值。然后,注册按钮不会按预期隐藏。即使第一个输入中没有值。当您再次更改较低输入中的值时,它可以正常工作。

谢谢你的时间!

尝试这样的事情:

if(r_cpw && (r_pw == r_cpw) && r_user) {
    enable your submit here
}
else {
    disable your submit here
}

或者考虑一下你的else语句的位置,在它之前有一个大括号关闭,这可能是你的问题(你的代码永远不会告诉你的最后一个if测试被评估为虚假时该怎么做......