Question

当用户尝试单击按钮时，用户提交的某些信息不正确时，我想发出警告。

<span class="error">*</span>
<label for="email"><span class="register">E-mail</span></label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="emailInfo"></span>
<input type="email" name="email" id="email" required="required" onkeyup="emailCheck()">

<button type="submit" id="button" style="vertical-align:middle" onclick="buttonCheck()"><span>Submit</span></button>

<script>
function emailCheck() {
            var emailReg=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            var address=document.getElementById("email").value;

            if (!emailReg.test(address)) {
                document.getElementById("emailInfo").innerHTML="<font color='red'>The email address is available";
                document.getElementById("button").disabled=true;
            } else {
                document.getElementById("emailInfo").innerHTML="";
                document.getElementById("button").disabled=false;
            }
        }

function buttonCheck() {
            if (document.getElementById("button").disabled) {
                alert("Please double check your info")
            }
        }
</script>

该按钮实际上被禁用。但是，当我单击按钮时什么也没发生。

Answer 1

您无法在已禁用的按钮上捕获click事件。您可以做的就是尝试使用CSS“模拟”禁用按钮的外观，然后捕获click事件。

例如，您可以在CSS中创建一个disabled类：

.disabled {
      background-color: #DDD;
      color: #999;
}

以下是使用您的代码的完整示例：

function emailCheck() {
  var emailReg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
  var address = document.getElementById("email").value;

  if (!emailReg.test(address)) {
    document.getElementById("emailInfo").innerHTML = "<font color='red'>The email address is available";
    document.getElementById("button").classList.add("disabled");
  } else {
    document.getElementById("emailInfo").innerHTML = "";
    document.getElementById("button").classList.remove("disabled");
  }
}

function buttonCheck() {
  if (document.getElementById("button").classList.contains('disabled')) {
    alert("Please double check your info")
  }
}

.disabled {
  background-color: #DDD;
  color: #999;
}

<span class="error">*</span>
<label for="email"><span class="register">E-mail</span></label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="emailInfo"></span>
<input type="email" name="email" id="email" required="required" onkeyup="emailCheck()">

<button type="submit" id="button" style="vertical-align:middle" onclick="buttonCheck()"><span>Submit</span></button>

Answer 2

禁用的表单控件不会对点击事件做出反应。
在您的示例中，用户单击按钮将永远不会触发该事件。

但是，您可以更改按钮的样式，使其看起来像已被禁用，但我不建议您这样做，因为用户倾向于相信他们以前对事物如何工作的了解。

最好的方法是始终保持按钮处于启用状态，并在单击时提醒用户，或删除/禁用按钮，但在其上方保留一条消息，说明为什么被禁用。

Answer 3

禁用该按钮后，您将无法单击。当有人尝试在输入电子邮件之前第一次单击该按钮时，我希望警报会显示出来。我只是稍微改变了你的逻辑。我想这就是你想要的。而且，我也为您提供了一个更好的电子邮件验证表达式。

function emailCheck() {
            var emailReg  = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            var address=document.getElementById("email").value;
           
            if (emailReg.test(address)) {
                document.getElementById("emailInfo").innerHTML="<font color='red'>The email address is available";
                document.getElementById("button").disabled=false;
            } 
            else {
               document.getElementById("emailInfo").innerHTML="";
               
           }
        }

function buttonCheck() {
        var emailReg  = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        var address=document.getElementById("email").value;
        
        if(!emailReg.test(address)){
            document.getElementById("button").disabled=true;
            alert("Please double check your info");
        }
      
}

<span class="error">*</span>
<label for="email"><span class="register">E-mail</span></label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="emailInfo"></span>
<input type="email" name="email" id="email" required="required" onkeyup="emailCheck()">

<button type="submit" id="button" style="vertical-align:middle" onclick="buttonCheck()"><span>Submit</span></button>

Javascript：链接到按钮的功能不起作用

3 个答案: