Javascript 如何根据密码是否匹配启用和禁用提交按钮？

我正在创建一个表单，用户将注册一个网站，在该表单中有两个输入字段帮助确认用户密码。我试图在密码不匹配时禁用submit按钮，然后在密码匹配时重新启用它。我目前有禁用部分工作，但我无法重新启用它

我已经试着看了这篇文章，但除了我目前所拥有的，我不知道我还需要做些什么

代码：

*名字：
*姓氏：
*电邮：
*用户名：
*密码：
*密码确认：
$（'form'）.validate（）；
$（'#password，#passwordConfirm'）。在（'keyup'，function（）上{
if（$（'#password'）.val（）==$（'#passwordConfirm'）.val（））{
$（'#message'）.html（'Matching'）.css（'color'，'green'）；
$（'submit'）.prop（'disabled'，false）；
}否则
$（'#message'）.html（'不匹配'）.css（'颜色'，'红色'）；
$（'submit'）.prop（'disabled'，true）；
});

您的代码不起作用有两个原因：

因为您使用的是

$（'submit'）

而不是

$（'submit'）

。您错误地使用了

submit

，好像它是按钮的

标记名而不是
id

因为，要重新启用按钮的代码所在的

if

语句的

else

部分没有大括号

{}

，因此只执行第一条指令。第二个被视为在

if

语句之外，并且它总是最后执行，因此保持按钮永久禁用

片段：
（仅保留演示所需的代码）

/*--JavaScript--*/
$（'form'）.validate（）；
$（'#password，#passwordConfirm'）。在（'keyup'，function（）上{
if（$（'#password'）.val（）==$（'#passwordConfirm'）.val（））{
$（'#message'）.html（'Matching'）.css（'color'，'green'）；
$（“#提交”）.prop（'disabled'，false）；
}否则{
$（'#message'）.html（'不匹配'）.css（'颜色'，'红色'）；
$（“#提交”）.prop（'disabled'，true）；
}
});

*密码：
*
密码确认：
您的代码不起作用有两个原因：

因为您使用的是
$（'submit'）
而不是
$（'submit'）
。您错误地使用了
submit
，好像它是按钮的
标记名而不是
id

因为，要重新启用按钮的代码所在的
if
语句的
else
部分没有大括号
{}
，因此只执行第一条指令。第二个被视为在
if
语句之外，并且它总是最后执行，因此保持按钮永久禁用

片段：


（仅保留演示所需的代码）


/*--JavaScript--*/
$（'form'）.validate（）；
$（'#password，#passwordConfirm'）。在（'keyup'，function（）上{
if（$（'#password'）.val（）==$（'#passwordConfirm'）.val（））{
$（'#message'）.html（'Matching'）.css（'color'，'green'）；
$（“#提交”）.prop（'disabled'，false）；
}否则{
$（'#message'）.html（'不匹配'）.css（'颜色'，'红色'）；
$（“#提交”）.prop（'disabled'，true）；
}
});

*密码：
*
密码确认：
我发现它实际上并不总是有效的。因此，我在脚本中添加了一个返回false

$('#user_password, #user_password_retype').on('keyup', function () {
  if ($('#user_password').val() == $('#user_password_retype').val()) {
     $('#message').html('Matching').css('color', 'green');
     $("#savebutton").prop('disabled', false);
     return true;
  } else 
     $('#message').html('Not Matching').css('color', 'red');
     $("#savebutton").prop('disabled',true);
     return false;
  });

事实上，我发现它并不总是有效的。因此，我在脚本中添加了一个返回false

$('#user_password, #user_password_retype').on('keyup', function () {
  if ($('#user_password').val() == $('#user_password_retype').val()) {
     $('#message').html('Matching').css('color', 'green');
     $("#savebutton").prop('disabled', false);
     return true;
  } else 
     $('#message').html('Not Matching').css('color', 'red');
     $("#savebutton").prop('disabled',true);
     return false;
  });

感谢您提供此解决方案！不幸的是，按“刷新”后，脚本看不到表单字段中的差异，即使字段不匹配，我也可以提交表单。如果字段不匹配，是否有办法在重新加载后保持“不匹配”状态？您只需在文档的
加载
事件期间重新运行事件处理程序即可。这是我不知道如何做的事情，但至少现在知道应该朝哪个方向看。谢谢您的解决方案！不幸的是，按“刷新”后，脚本看不到表单字段中的差异，即使字段不匹配，我也可以提交表单。如果字段不匹配，是否有办法在重新加载后保持“不匹配”状态？您只需在文档的
加载
事件期间重新运行事件处理程序即可。这是我不知道如何做的事情，但至少知道现在应该朝哪个方向看。