Question

我有这个HTML

> <div class="row">
>                     <div class="col-xs-6 col-sm-6 col-md-6">
>                         <div class="form-group">
>                             <input type="password" name="pass1" id="pass1" class="form-control input-lg" placeholder="Password"
> tabindex="3">
>                         </div>
>                     </div>
>                     <div class="col-xs-6 col-sm-6 col-md-6">
>                         <div class="form-group">
>                             <input type="password" name="pass2" id="pass2"  onkeyup="checkPass(); return false;" class="form-control
> input-lg" placeholder="Confirm Password ">
>                            <span id="confirmMessage" class="confirmMessage"></span>
>                       </div>
>                       
>                     </div>
>                   
>                 </div>
>                 
>                 <div class="row">
>                     <input type="submit" id="login" value="Register">
>                   </div>

我该怎么做：

当密码为空时，应禁用提交（禁用=“禁用”）。

在密码中输入内容以删除已禁用的属性。

如果密码字段再次变空（文本被删除），则应再次禁用提交按钮。

当密码不匹配时，应禁用提交按钮

我试过这样的事情：

 <script type="text/javascript">
function checkPass()
{
    //Store the password field objects into variables ...
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    //Store the Confimation Message Object ...
    var message = document.getElementById('confirmMessage');
    //Set the colors we will be using ...
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    //Compare the values in the password field 
    //and the confirmation field
    if(pass1.value == pass2.value){
        //The passwords match. 
        //Set the color to the good color and inform
        //the user that they have entered the correct password 
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "Passwords Match!"
    }else{
        //The passwords do not match.
        //Set the color to the bad color and
        //notify the user.
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "Passwords Do Not Match!"
        $("#submit").attr("disabled", "disabled");
    }
}  
</script>

javascript显示消息如果密码匹配或不匹配但我的问题是当密码与SUBMIT按钮不匹配时仍然继续并提交。

Answer 1

您必须更改元素属性，而不是属性：

＆＃13;

$(document).ready(function() {
  var isDisabled = false;
  $('#toggler').click(function() {
    isDisabled = !isDisabled;
    $('#submit').prop('disabled', isDisabled);
  });

  $('form').submit(function(e) {
    e.preventDefault();
    alert('Submiting');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
  <button type="button" id="toggler">Disable/Enable</button>
  <button type="submit" id="submit">Submit</button>
</form>

＆＃13;

Answer 2

使用类似的东西：

if (pass1.value && pass2.value && pass1.value == pass2.value) {
    pass2.style.backgroundColor = goodColor;
    message.style.color = goodColor;
    message.innerHTML = "Passwords Match!"
    $("#submit").prop("disabled", false);
} else {
    pass2.style.backgroundColor = badColor;
    message.style.color = badColor;
    message.innerHTML = "Passwords Do Not Match!"
    $("#submit").prop("disabled", true);
}

我添加了两个长度检查（如果值为""，则将其评估为false），并在两个字符串匹配时添加#prop()调用以启用按钮。

Answer 3

很抱歉，因为我无法发表评论，我会回答如果你有一个表格（我假设你做了事件，虽然我看不到它），你可以这样做

 $("#form").on('submit', function(e) {
  e.preventDefault();
    if(!$('#submit').prop('disabled')){
                $(this).submit();
     }

});

基本上我首先停止提交，然后在提交表单之前检查按钮是否被禁用。

密码匹配时，javascript禁用/启用提交按钮

3 个答案: