时间戳

首页 > 解决方案 > 为什么我的正则表达式电子邮件验证不起作用？

javascript - 为什么我的正则表达式电子邮件验证不起作用？

问题描述

我正在尝试使用正则表达式创建一个超级简单的电子邮件验证器。我已经在 SO 上查看了类似的问题，并在其他地方查找了其他解决方案，例如 W3resource。我不确定我是否忽略了某些内容，或者我是否输入了错误的内容。我遇到的问题是，无论我输入正确还是错误的电子邮件，都没有任何反应。我的两个警报都不起作用，页面保持空白。

这是我的 Javascript 代码。

function checkmail(inputText)
{
    var emailregex = /^\w[-._\w]*\w@\w[._\w]*\w\.\w{2,8}$/;
    if(inputText.value.match(emailregex)) {
        alert("You have entered a valid email address!");
        return true;
    } else {
        alert("You have entered an invalid email address!");
        return false;
    }
}

这是我的相关 HTML 代码。

        <div class="mail">
            <center>
                <p>Please enter an email address.</p>
                <form id="inputemail">
                    <input type='text' name='input'/>
                    <input type="submit" name="submit" value="Verify" onclick="checkmail(inputText)"/>
                </form>
            </center>
        </div>
        <script src="regexobj.js"></script>
    </body>
</html>

标签： javascripthtmlregex

解决方案

您需要指定从何处获取数据。在您的代码中，您有一个定义变量“inputText”的函数。在您的代码中，没有数据被发送到函数并且函数无法获取数据并返回错误。

要解决此问题，您需要指定要获取的数据，例如：

function checkmail(){
var input = document.querySelector("input[name='input']");
var emailregex = /^\w[-._\w]*\w@\w[._\w]*\w\.\w{2,8}$/;
  if(input.value.match(emailregex)) {
    alert("You have entered a valid email address!");
    return true;
  } else {
    alert("You have entered an invalid email address!");
    return false;
  }
}

在此示例中，该函数将搜索具有输入名称的输入字段。input.value将包含来自输​​入字段的数据。

在您的 HTML 文件中，您需要将按钮提交更改为

<input type="submit" name="submit" value="Verify" onclick="checkmail()"/>

我已经测试了上面的代码，它应该可以相应地工作。我希望对您的问题有所帮助。

编辑：提交表单时，页面将自动重新加载，如果您想留在同一页面上并发出警报，您可以在 HTML 文件中进行以下更改：

  • 删除提交按钮上的 onsubmit 属性

<input type="submit" name="submit" value="Verify"/>

  • 将以下 onsubmit 函数添加到您的表单

onsubmit="event.preventDefault(); checkmail();"

当您提交表单时，表单将首先阻止页面重新加载，然后执行您的功能。当您单击警报时，页面不会重新加载并删除表单中插入的值。

推荐阅读