使用 Javascript 的电子邮件验证不适用于 HTML

Question

我试图让用户检查他的电子邮件地址是否通过 RFC 标准，并将其与下面的正则表达式进行比较。

我已经使用负责执行验证测试的函数在控制台上检查了几个示例。我知道我的正则表达式还没有准备好，但是每当我在控制台上尝试一些示例时，它都可以工作。

当函数从包含的“文本”HTML 表单中获取值时，问题就开始了。

使用 Javascript，我还检查了浏览器如何解释值（只需将文本粘贴到另一个 div 中）- 结果还可以。

为什么在 HTML 表单上使用输入值时验证不能正常工作？

const regular = /^[a-z/d]+[/d/w.-]*@(?:[a-z/d-]+[a-z/d-]\.+){1,5}[a-z]{1,3}[a-z]$/i;
test = function(email) {
    if (regular.test(email) == false) {
        alert('Your email adress is not correct. Try again!')
        document.getElementById('result').innerHTML = document.getElementById('text').value;
        return false;
    } else {
        alert('Match');
        return true;
    }
}

<div id='form-structure'>
   <form name='form1' action='#'>
      <label for='email' name='email'>E-mail</label>
      <input type='text' name='text' id='text' placeholder="Enter your email" required>
      <button type='submit' name='submit' onclick="test(document.form1.text)" 
         value='Submit'>Test</button>
   </form>
</div>
<div id='result' style='font-size: 15px'>
</div>

Answer 1

虽然这可能不是最好的代码示例，但您的问题的简单解决方案在于 document.form1.text。简单地把它改成document.forms.form1.text。

例如

<button type='submit' name='submit' onclick="test(document.forms.form1.text.value)" 
         value='Submit'>Test</button>

编辑：

我之前错过了 .value。现在它应该可以工作了。

Answer 2

您没有将正确的值传递给您的函数。在您的函数中，email 变量是

<input type="text" name="text" id="text" placeholder="Enter your email" required></input>

您需要传递给函数的是元素#test 的实际值。这可以使用此选择器进行检索。您可以在函数内部使用此选择器，也可以直接在函数调用中使用。后者是首选，就像Mr Zach 指出的那样。 ：

 document.getElementById('text').value;

另外，您的正则表达式没有接缝正确。您在数字标记和单词标记中使用正斜杠 (/)。在这种情况下，您需要反斜杠 (\)。

我还删除了表单的submit 行为，这是为了方便调试。这不是您的问题的原因。

const regular = /^[a-z\d]+[\d\w.-]*@(?:[a-z\d-]+[a-z\d-]\.+){1,5}[a-z]{1,3}[a-z]$/i;

var test = function(email) {
    if (regular.exec(email) == null) {
        alert('Your email adress is not correct. Try again!')
        document.getElementById('result').innerHTML = document.getElementById('text').value;
        return false;
    } else {
        alert('Match');
        return true;
    }
}

<div id='form-structure'>
   <form name='form1' action=''>
      <label for='email' name='email'>E-mail</label>
      <input type='text' name='text' id='text' placeholder="Enter your email" required>
      <button type='button' name='submit' onclick="test(document.getElementById('text').value)" 
         value='Submit'>Test</button>
   </form>
</div>
<div id='result' style='font-size: 15px'>

</div>