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

Question

我正在尝试使用正则表达式创建一个超级简单的电子邮件验证器。 我已经在此处检查了类似的问题，以及在其他地方（例如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>

Answer 1

您需要指定从何处获取数据。 在您的代码中，您有一个定义变量“ 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文件中，您需要将按钮Submit更改为

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

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

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

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

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

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

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

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