我正在尝试使用type="email"验证输入js。
我找到了不同的方法来完成这项工作，但我没有一个能奏效。
的HTML
<label for="email" class="form__label">User e-mail:</label>
<input type="email" name="email" id="email" onblur="checkEmail(this.value);" class="form__input" >
JS
document.addEventListener('DOMContentLoaded', function() {
var email = document.getElementById('email');
function checkEmail(email) {
var reg1 = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;
if (reg1.test(email) == false) {
email.style.border = "1px solid red";
}else (reg1.test(email) == true) {
email.style.border = "1px solid green";
}
};
});
我每次都能得到的是：
Uncaught ReferenceError: checkEmail is not defined at HTMLInputElement.onblur . ..我知道，我犯了一些简单的错误，但是我为此苦了一段时间，无法继续前进...
最佳答案
您可以使用@Andriy Klitsuk引用的HTML5电子邮件检查功能。因此，您可以完全省略多余的checkEmail调用。
但是要解决您的错误：
未捕获的ReferenceError：在以下位置未定义checkEmail
HTMLInputElement.onblur
您会收到上述错误，因为checkEmail函数位于EventHandler document.addEventListener('DOMContentLoaded', function(){ ....内部，因此无法在其外部使用。
您可以将函数从EventListener中取出，因为无论如何在EventHandler中都不会调用它：
document.addEventListener('DOMContentLoaded', function() {
var email = document.getElementById('email');
});
function checkEmail(email) {
var reg1 = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;
if (reg1.test(email) == false) {
email.style.border = "1px solid red";
} else if (reg1.test(email) == true) { // if was missing here
email.style.border = "1px solid green";
}
};