我正在尝试在按下提交电子邮件按钮时验证电子邮件地址。
我尝试添加JQuery验证无济于事。我想知道如何添加" if"声明只会检查并通知用户,它不是同一标签中的有效电子邮件,表明它正在发送电子邮件。
$('#Submit').on("click", function () {
result = '<label style="color:white;">Sending message ...</label>';
$("#sendSuccess").html(result);
var email = $("#email").val();
var body = "From: " + name + "<br /> Email: " + email + "<br /> Message: " + message;
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "EmailService.asmx/SendMail",
data: '{ body: "' + body + '", subject: "' + subject + '"}',
dataType: "json",
async: true,
success: function (data, status, xhr) {
//alert('success');
result = '<label style="color:green;">The message has been sent!</label>';
$("#sendSuccess").html(result);
},
error: function (data, status, xhr) {
//alert('fail');
result = '<label style="color:red;">The message has failed to send!</label>';
$("#sendSuccess").html(result);
}
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div>
<input id="email" type="text" name="email" class="form-control" />
</div>
<div>
<button type="submit" id="Submit" class="form-control">Click</button>
</div>
</html>
&#13;
答案 0 :(得分:0)
您可以这样做:
<html>
<div>
<input id="email" type="text" name="email" class="form-control" />
</div>
<div>
<button type="submit" id="Submit" class="form-control">
</div>
</html>
<script>
function isValidEmail(email) {
return /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/i.test(email);
}
$('#Submit').on("click", function () {
var email = $('#email').val();
if (isValidEmail(email)) {
result = '<label style="color:white;">Sending message ...</label>';
$("#sendSuccess").html(result);
var body = "From: " + name + "<br /> Email: " + email + "<br /> Message: " + message;
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "EmailService.asmx/SendMail",
data: '{ body: "' + body + '", subject: "' + subject + '"}',
dataType: "json",
async: true,
success: function (data, status, xhr) {
//alert('success');
result = '<label style="color:green;">The message has been sent!</label>';
$("#sendSuccess").html(result);
},
error: function (data, status, xhr) {
//alert('fail');
result = '<label style="color:red;">The message has failed to send!</label>';
$("#sendSuccess").html(result);
}
});
} else {
$('#sendSuccess').html('<label style="color:white;">Please enter a valid email address</label>');
}
});
<script/>
请注意,这将验证大多数电子邮件,但可能会拒绝一些技术上有效的非常奇怪的电子邮件地址。您可以阅读更多here以及评论中发布的StackOverflow answer其他人。
如果你需要验证更多的字段,那么可能值得给jQuery验证另一个镜头......以前使用它并且如果你正在进行大量的通用表单验证,那肯定会有所帮助。