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

时间:2019-02-09 18:56:52

标签: javascript html regex

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

1 个答案:

答案 0 :(得分: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文件中将提交按钮更改为

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

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

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

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

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

  • 在表单中添加以下onsubmit函数

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

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