我创建了一个电子邮件表单验证函数，它显示警报消息，但不满意。

Question

我创建了一个函数来在keypress上显示警告消息，如果用户在字段中没有包含"@“，它应该继续显示，但是一旦添加了"@”，那么警告消息就会消失。

以下是代码：

function makeHappen() {
    var take = document.getElementById('emailID');
    var a = document.getElementById("alert3second");
    if (!take.value.indexOf("@") > -1) {
        a.style.display = "block"
    } else {
        a.style.display = "none"
    }
}

<div class="form-group">
<input type="email" class="form-control font-weight-bold" placeholder="YOUR EMAIL ADDRESS" id="emailID" onclick="formValidator2()" name="budget3" onkeypress="makeHappen()" required>

<div id="alert3" class="alert-danger">
    <i class="fa fa-warning pr-2 pt-1"></i>
    Please Your email address is required
</div>

<div id="alert3second" class="alert-danger">
    <i class="fa fa-warning pr-2 pt-1"></i>
    Enter a valid email
</div>
</div>

​

Answer 1

不要使用onkeypress，而是使用onkeyup

当用户释放一个键(在键盘上)时，

onkeyup属性触发。https://www.w3schools.com/tags/ev_onkeyup.asp

并将style="display:none;"添加到alert3second div以使消息在输入中没有值时消失。

​

function makeHappen() {
    var take = document.getElementById('emailID');
    var a = document.getElementById("alert3second");
    
    if (take.value.indexOf("@") == -1) {
 
        a.style.display = "block"
    } else {
        a.style.display = "none"
    }
}

 <div class="form-group">
 <input type="email" class="form-control font-weight-bold"
    placeholder="YOUR EMAIL ADDRESS" 
    id="emailID" onclick="formValidator2()"
    name="budget3" onkeyup="makeHappen()" required>
    
    <div id="alert3" class="alert-danger">
      <i class="fa fa-warning pr-2 pt-1"></i>
      Please Your email address is required
    </div>
    
    <div id="alert3second" class="alert-danger" style="display:none;">
      <i class="fa fa-warning pr-2 pt-1"></i>
      Enter a valid email
    </div>
</div>

​

Answer 2

您的if语句的逻辑需要更清楚地说明：

if (take.value.indexOf('@') == -1) 

可以通过运行当前的if语句来测试这一点，如下所示：

> !"hello".indexOf("@") > -1 
true
> !"hello@".indexOf("@") > -1 
true

我可能会指出，您应该更好地命名您的变量。也许你应该叫它emailID，而不是“拿走”？

function validateEmail() {
    var emailId = document.getElementById('emailID').value;
    var errorMsg = document.getElementById('alert3second');
    if (emailId.indexOf('@') == -1) {
        errorMsg.style.display = 'block';
    } else {
        errorMsg.style.display = 'none';
    }
}