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

Question

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

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

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

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

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

 const regular = /^[az/d]+[/d/w.-]*@(?:[az/d-]+[az/d-]\\.+){1,5}[az]{1,3}[az]$/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

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

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

您需要传递给函数的是元素#test的实际值。 这可以使用这个选择器来检索。 你可以在函数内部使用这个选择器，或者直接进入函数调用。 正如扎克先生指出的那样，后者是首选。 ：

 document.getElementById('text').value;

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

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

 const regular = /^[az\\d]+[\\d\\w.-]*@(?:[az\\d-]+[az\\d-]\\.+){1,5}[az]{1,3}[az]$/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>

Answer 2

虽然这可能不是最好的代码示例，但解决您问题的简单方法在于document.form1.text 。 简单地将其更改为document.forms.form1.text 。

例如

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

编辑：

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