javascript上的电子邮件验证函数错误
Email validation function error on javascript
我的电子邮件验证似乎不太正常-除了"ffhjisf"不是有效的电子邮件而"空字段需要数据，但出于某种原因，将有效的电子邮件视为错误。你能帮我修改我的电子邮件地址检查功能吗？
Javascript
function checkForm(){
if (document.getElementById("fname").value == "" ) {
document.getElementById("errfname").style.display = "inline";
document.getElementById("errfname").style.visibility = "visible";
}
if (document.getElementById("fname").value.length < 2 ) { // and needs to be only letter and/or one hyphen
document.getElementById("errfname1").style.display = "inline";
document.getElementById("errfname1").style.visibility = "visible";
}
if (document.getElementById("sname").value == "" ) {
document.getElementById("errsname").style.display = "inline";
document.getElementById("errsname").style.visibility = "visible";
}
if (document.getElementById("sname").value.length < 2 ) { // just letters like first name (fname)
document.getElementById("errsname1").style.display = "inline";
document.getElementById("errsname1").style.visibility = "visible";
}
if (document.getElementById("title").value == "Please select" ) {
document.getElementById("errtitle").style.display = "inline";
document.getElementById("errtitle").style.visibility = "visible";
}
if (document.getElementById("HANo").value == "" ) {
document.getElementById("errHANo").style.display = "inline";
document.getElementById("errHANo").style.visibility = "visible";
}
if (document.getElementById("HANo").value.length != 6 ) { // and needs to be a number
document.getElementById("errHANo2").style.display = "inline";
document.getElementById("errHANo2").style.visibility = "visible";
}
if (document.getElementById("email").value == "" ) {
document.getElementById("erremail").style.display = "inline";
document.getElementById("erremail").style.visibility = "visible";
}
if (document.getElementById("email").value.length > 0 ) {
if(checkEmail())
{
document.getElementById("erremail").style.display = "inline";
document.getElementById("erremail").style.visibility = "visible";
}
}
if (document.getElementById("telno").value.length > 11 )
{ // and needs to be a number
document.getElementById("errtelno").style.display = "inline";
document.getElementById("errtelno").style.visibility = "visible";
}
}
function checkEmail(){
var email = document.getElementById('email');
var emailRegEx = /[-'w.]+@([A-z0-9][-A-z0-9]+'.)+[A-z]{2,4}/;
if (!emailRegEx.test(email.value))
{
document.getElementById("erremail2").style.display="inline";
document.getElementById("erremail2").style.visibility = "visible";
return false;
} else {
return true;
}
}
和html页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RATool</title>
<link rel="stylesheet" type="text/css" href="cfcss.css">
<script src="cf.js"></script>
</head>
<body>
<h1> Zedland Health Authority </h1>
<h2> Contact Form </h2>
<fieldset>
<label for="fname">First Name:</label>
<input name="fname" id="fname" class="formfield" type="text">
<span id="errfname" class="error">*This is required</span>
<span id="errfname1" class="error">*Name fields must have more than one character, and do not contain numbers
or other non-allowed alphabetic characters. The only character the last name
field should legitimately contain is a hyphen (e.g. Whittaker-Jones).</span>
<span id="errfname2" class="error">*This can only contain alphabetic numbers and one hyphen</span>
<br>
<label for="sname">Surname:</label>
<input name="sname" id="sname" class="formfield" type="text">
<span id="errsname" class="error">*This is required</span>
<span id="errsname1" class="error">*Name fields must have more than one character, and do not contain numbers
or other non-allowed alphabetic characters. The only character the last name
field should legitimately contain is a hyphen (e.g. Whittaker-Jones).</span>
<span id="errsname2" class="error">*This can only contain alphabetic numbers and one hyphen</span>
<br>
<label for="title">Title: </label>
<select name="title" id="title">
<option value="Please select">Please select</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss.">Miss.</option>
<option value="Master.">Master.</option>
</select>
<span id="errtitle" class="error">*This is required</span>
<br>
<br>
<label for="HANo">Health Authority Number:</label>
<input name="HANo" id="HANo" class="formfield"type="text">
<span id="errHANo" class="error">*This is required</span>
<span id="errHANo2" class="error">* Numbers are in the form of a six-digit integer prefixed with the letters
ZHA (e.g. ZHA346783)</span>
<br>
<br>
<label for="email">Email:</label>
<input name="email" id="email" class="formfield"type="text">
<span id="erremail" class="error">*This is required</span>
<span id="erremail2" class="error">*Please enter a valid email</span>
<br>
<br>
<label for="telno">Telephone Number:</label>
<input name="telno" id="telno" class="formfield" type="text">
<span id="errtelno" class="error">* If a telephone number is entered, then it should contain only numbers, not
letters, or other disallowed characters. A valid Zedland telephone number has
11 digits (no spaces)</span>
<br>
<button onclick="checkForm()">Submit</button>
</fieldset>
</body>
</html>
您的checkEmail()函数返回带有有效电子邮件的true。然而，使用有效的电子邮件，这将在您的代码中执行：
if(checkEmail())
{
document.getElementById("erremail").style.display = "inline";
document.getElementById("erremail").style.visibility = "visible";
}
这与你所期望的相反。相反，将错误消息设置为在!checkEmail()时可见。
此外，您应该将表达式锚定到^和$。否则，它可以匹配诸如"invalid email@foo.org here"之类的子字符串。
/^[-'w.]+@([A-z0-9][-A-z0-9]+'.)+[A-z]{2,4}$/
代码
function checkForm() {
var mailInput = document.getElementById("email"),
errEmail = document.getElementById("erremail"),
errEmail2 = document.getElementById("erremail2");;
if (mailInput.value == "") { // Empty email
errEmail.style.visibility = "visible";
errEmail2.style.visibility = "hidden";
} else {
errEmail.style.visibility = "hidden";
if (checkEmail(mailInput)) { // Valid email
errEmail2.style.visibility = "hidden";
} else { // Invalid email
errEmail2.style.visibility = "visible";
}
}
}
function checkEmail(email) {
var emailRegEx = /^[-'w.]+@([A-z0-9][-A-z0-9]+'.)+[A-z]{2,4}$/;
return emailRegEx.test(email.value);
}#erremail,
#erremail2 {
display: inline;
visibility: hidden;
}<h1> Zedland Health Authority </h1>
<h2> Contact Form </h2>
<fieldset>
<label for="email">Email:</label>
<input name="email" id="email" class="formfield" type="text">
<span id="erremail" class="error">*This is required</span>
<span id="erremail2" class="error">*Please enter a valid email</span>
<button onclick="checkForm()">Submit</button>
</fieldset>函数的返回错误-为了使消息显示：if(！emailRegEx.test(email.value((必须返回true(无效(，则不需要相反的返回。
相关文章：
- Node.js v6.2.0类扩展不是函数错误
- Javascript搜索函数错误
- Chrome Javascript日期构造函数错误
- 浏览器中出现javascript初始大写函数错误
- Createjs冲突问题localToLocal不是函数错误
- Java脚本函数错误
- 更新带有Javascript函数错误的变量
- 如何将对象插入对象列表的开头，当它有 unshift 不是函数错误
- 在将 Pickadate 与 Meteor 一起使用时，未定义不是函数错误
- 运行咕噜咕噜咕噜抛出 _.object 不是函数错误
- 了解函数(错误、数据）回调
- javascript中的typeof(）函数错误
- 我一直在获取angularjs服务不是函数错误(LoginService.login不是函数）
- HTML5拖拽&drop正在抛出undefined不是函数错误
- Google Maps API a.lat不是函数错误
- getItemAtIndex不是函数错误
- Javascript停止函数错误
- 对话框函数错误无效函数
- Javascript 自定义函数错误
- 因果报应单元测试'未定义'不是函数错误
