电子邮件验证：JavaScript
Posted
技术标签:
【中文标题】电子邮件验证：JavaScript【英文标题】：Email Validation: JavaScript 【发布时间】：2017-08-15 09:17:47 【问题描述】：我正在尝试创建一个验证电子邮件地址的表单。 “提交”按钮不起作用，或者是导致问题的电子邮件验证脚本。我是编码新手，需要一些帮助。提前谢谢！
<!doctype html>
<html>
<head>
<title>JQuery Lesson</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<style>
#wrapper
margin: 0 auto;
width: 500px;
font-family: helvetica;
font-size: 1.2em;
#error
color: red;
margin: 20px;
#email
height: 30px;
width: 300px;
border-radius: 20px;
padding-top: 10px;
margin-bottom: 15px;
font-size: 1.2em;
float: none;
margin: 0 auto;
#phone
height: 30px;
width: 300px;
border-radius: 20px;
padding-top: 10px;
margin-bottom: 15px;
font-size: 1.2em;
float: none;
margin: 0 auto;
#password
height: 30px;
width: 300px;
border-radius: 20px;
padding-top: 10px;
margin-bottom: 15px;
font-size: 1.3em;
float: none;
margin: 0 auto;
#confirmPassword
height: 30px;
width: 300px;
border-radius: 20px;
padding-top: 10px;
margin-bottom: 15px;
font-size: 1.3em;
float: none;
margin: 0 auto;
.spacer
font-size:0;
height: 20px;
line-height: 0;
label
width: 90px;
float:left;
padding-top: 10px;
#submitButton
height: 30px;
width: 90px;
font-size: 1.1em;
float: none;
margin: 0 auto;
</style>
</head>
<body>
<div id= "wrapper"; >
<form id = "validationForm">
<div id = "error"></div>
<label for = "email"> Email </label>
<input id = "email" />
<div class="spacer"></div>
<label for = "phone"> Phone </label>
<input id = "phone" />
<div class="spacer"></div>
<label for = "password"> Password </label>
<input id = "password", type = "password" />
<div class="spacer"></div>
<label for = "confirm password"> Confirm Password </label>
<input id = "confirmPassword", type = "password" />
<div class="spacer"></div>
<button id = "submitButton" type="submit" value="submit"> Submit
</button>
</form>
</div>
<script>
function validateEmail(email)
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|
(".+"))@((\[[0-9]1,3\.[0-9]1,3\.[0-9]1,3\.[0-9]1,3])|(([a-zA-Z\-0-
9]+\.)+[a-zA-Z]2,))$/;
return re.test(email);
;
if (!validEmail($("#email").val())))
$("#error").html("Please enter a valid email address.");
;
</script>
</body>
</html>
【问题讨论】：
你试过简单的<input type="email">吗？
使用<input type="email" /> 接受电子邮件地址，您无需编写任何 JavaScript。 （还有一个好处是不会像这个正则表达式那样拒绝有效的电子邮件地址。）
你在哪里调用了这个 validateEmail() 函数？您需要提供提交表单方法并在那里调用此验证。
【参考方案1】：
首先，validEmail 函数内部存在错误。试试这个：
function validEmail(email)
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]1,3\.[0-9]1,3\.[0-9]1,3\.[0-9]1,3])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]2,))$/;
return re.test(email);
;另外，您需要在表单上添加一个事件监听器。
解决方案：https://jsbin.com/rowecoboxi/edit?html,js,output
【讨论】：
以上是关于电子邮件验证：JavaScript的主要内容，如果未能解决你的问题，请参考以下文章