显示Javascript表单验证消息

因此，我有一个简单的表单，如果字段输入不正确，我希望它显示一条警告消息，到目前为止，我有一个示例可以很好地显示警告消息：

function validateName(x){
var re = /^[a-z ,.'-]+$/i;
if(re.test(document.getElementById(x).value)){
document.getElementById(x).style.background ='#ccffcc';
document.getElementById(x + 'Error').style.display = "none";
return true;
}else{
document.getElementById(x).style.background ='#e35152';
document.getElementById(x + 'Error').style.display = "block";
return false; 
}
}

以下是全名字段的html：

<p  class="ex"><strong>Full Name:</strong>
 <br>
 <input type="text" name="name" placeholder="First Name" id="name" onblur="validateName(name)">
 <span id="nameError" style="display: none;">Only alphabetic characters, hyphens & apostrophes are accepted.</span>

全名：


只接受字母字符、连字符和撇号。

现在，我想对email字段做同样的操作，如果输入错误，它会将框显示为红色，但是不会显示任何消息。以下是我到目前为止的Javascript：

function validateEmail(email){ 
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(re.test(email)){
document.getElementById('email').style.background ='#ccffcc';
document.getElementById('emailError').style.display = "none";
return true;
}else{
document.getElementById('email').style.background ='#e35152';
document.getElementById(email + 'Error').style.display = "block";
return false;
}
}

功能验证电子邮件（电子邮件）{
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
如果（重新测试（电子邮件））{
document.getElementById（'email'）.style.background='#ccffcc'；
document.getElementById（'emailError'）.style.display=“无”；
返回true；
}否则{
document.getElementById（'email'）.style.background='#e3552'；
document.getElementById（email+'Error'）.style.display=“block”；
返回false；
}
}

以下是电子邮件字段的html：

<strong>Contact Email:</strong>
<br>
<input type="text" name="email" placeholder="Example@Email.com" id="email" onblur="validateEmail(value)" />
<span id="emailError" style="display: none;">You must enter a valid email address</span>

联系电子邮件：


您必须输入有效的电子邮件地址

您将错误的id传递给元素选择器。 尝试

emailError

而不是

email+'Error'

function validateEmail(email){ 
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(re.test(email)){
document.getElementById('email').style.background ='#ccffcc';
document.getElementById('emailError').style.display = "none";
return true;
}else{
document.getElementById('email').style.background ='#e35152';
document.getElementById('emailError').style.display = "block";
return false;
}
}

功能验证电子邮件（电子邮件）{
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
如果（重新测试（电子邮件））{
document.getElementById（'email'）.style.background='#ccffcc'；
document.getElementById（'emailError'）.style.display=“无”；
返回true；
}否则{
document.getElementById（'email'）.style.background='#e3552'；
document.getElementById（'emailError'）.style.display=“block”；
返回false；
}
}

为什么要向我们显示“全名”字段（带有“名字”占位符，它似乎不能准确地表示您想要的信息），然后显示

validateEmail（）

函数？