JS 学生电子邮件验证

Question

我是 Javascript 的初学者，我正在寻找解决以下代码不起作用的方法。
我已经在 Whosebug 上查看了几个教程，并相信它应该可以工作......但事实并非如此。

HTML 看起来像这样：

<form id="personalInfo"> 
    <h2>Email: </h2>
    <input type="text" name="Email" id="Email">
    <br>
</form> 

<input type="button" onclick = "validateEmail()">

Javascript 看起来像这样：

function validateEmail() 
{
    var reg = /^([A-Za-z0-9_\-\.]){1,}\@([A-Za-z0-9_\-\.]){1,}\.([A-Za-z]{2,4})$/;
    var address = document.forms[personalInfo].elements[Email].value;

    if (reg.test(address) == false) {
        alert ("Email not valid");
        return false;
    }
    return true;
}

根据我的帐户，如果用户输入的电子邮件地址无效，这应该弹出警报。
相反，什么也没有发生。我不确定测试是否均匀运行.

Answer 1

function validateEmail() {
  // There are, I feel, better version of this regex online
  // You can check "https://emailregex.com/"
  var reg = /^([A-Za-z0-9_\-\.]){1,}\@([A-Za-z0-9_\-\.]){1,}\.([A-Za-z]{2,4})$/;

  // document.getElementById() - Easier to read & understand, and more widely used
  var address = document.getElementById('Email').value;

  // Corrected your returns - not the main issue in the function, but the old
  // returns might have caused confusion
  if (reg.test(address) == false) {
    alert("Email not valid");
    return false
  }
  return true
}

<form id="personalInfo">
  <h2>Email: </h2>
  <input type="text" name="Email" id="Email">
</form>

<!-- You had a typo on the onclick but has since been fixed -->
<input type="button" onclick="validateEmail()" value="Submit">

Answer 2

这里有两个问题：

1- 在您的 HTML 中，您在这里缺少一个 = 标志：onclick"validateEmail()"（编辑：看来您现在修复了它）

2- 在你的 Javascript 中，索引 personalInfo 和 Email 是字符串，用引号引起来：

var address = document.forms['personalInfo'].elements['Email'].value;

function validateEmail() 
{
var reg = /^([A-Za-z0-9_\-\.]){1,}\@([A-Za-z0-9_\-\.]){1,}\.([A-Za-z]{2,4})$/;
var address = document.forms['personalInfo'].elements['Email'].value;

if (reg.test(address)== false)
{
    alert ("Email not valid");
    return false
}   
return true;
}

<form id="personalInfo"> 
<h2>Email: </h2> <input type="text" name="Email" id="Email">  <br>
</form> 

<input type="button" onclick="validateEmail()">

Answer 3

处理电子邮件输入时，将输入类型设置为 email 而不是 text - 像这样：

<input name="my-email" type="email" />"

然后浏览器会对输入进行校验；例如如果输入不存在 @。

JS 学生电子邮件验证

JS Student Email Validation

javascript

email-validation