我想检查用户输入是否是JavaScript的电子邮件地址,然后将其发送到服务器或试图发送电子邮件,以防止最基本的误解。
当前回答
我正在使用这个功能
/**
* @param {*} email
*/
export const validateEmail = email => {
return new RegExp(/[\w-]+@([\w-]+\.)+[\w-]+/gm).test(email);
};
其他回答
如何创建一个功能,将测试任何字符串对电子邮件的模式使用常规表达在JavaScript,因为我们知道电子邮件地址可以是相当不同的地区,如在英国和澳大利亚它通常以.co.uk 或.com.au 结束,所以我试图覆盖这些也,也检查字符串是否转移到功能,这样的东西:
var isEmail = function(str) {
return typeof str==='string' && /^[\w+\d+._]+\@[\w+\d+_+]+\.[\w+\d+._]{2,8}$/.test(str);
}
然后检查它是否像下面的电子邮件:
isEmail('alex@example.com'); //true
isEmail('alireza@test.co.uk'); //true
isEmail('peter.example@yahoo.com.au'); //true
isEmail('alex@example.com'); //true
isEmail('peter_123@news.com'); //true
isEmail('hello7___@ca.com.pt'); //true
isEmail('example@example.co'); //true
isEmail('hallo@example.coassjj#sswzazaaaa'); //false
isEmail('hallo2ww22@example....caaaao'); //false
下面是我在前端电子邮件验证中使用的一个功能(常规表达来自parsley.js)
<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<style>
.form-style {
color: #ccc;
}
</style>
</head>
<body>
<h1>Email Validation Form Example</h1>
<input type="text" name="email" id="emailInput" class="form-style">
<script>
function validateEmail(emailAddress) {
var regularExpression = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))){2,6}$/i;
return regularExpression.test(emailAddress);
}
function showEmailValidationState(event) {
if (validateEmail(event.target.value)) {
document.getElementById("emailInput").style.color = 'black';
}
}
document.getElementById("emailInput").addEventListener("keyup", showEmailValidationState);
</script>
</body>
</html>
做这:
^([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?)$
基于 RFC 2822
点击 https://regex101.com/r/857lzc/1
经常在数据库中存储电子邮件地址时,我会使它们变得更低,在实践中, regexs 通常可以被标记为案例不敏感。
[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?
下面是它在JavaScript中使用的一个例子(最终是无敏感的旗帜)。
var emailCheck=/^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i;
console.log( emailCheck.test('some.body@domain.co.uk') );
注意: 技术上,一些电子邮件可以包含引用在 @ 符号之前的部分与逃避字符在引用中(因此,您的电子邮件用户可以是无情的,并包含如 @ 和“......”等内容,只要它是写在引用中)。
注意2:电子邮件的开始(在 @ 标志之前)可能是案例敏感(通过规格)。但是,任何具有案例敏感电子邮件的人可能会遇到问题,在实践中,案例不敏感是一个安全的假设。
一个不检查 TLD 的存在的解决方案是不完整的。
几乎所有这些问题的答案都建议使用Regex来验证电子邮件地址,我认为Regex仅适用于基本验证,似乎检查电子邮件地址的验证实际上是两个单独的问题:
电子邮件格式验证:确保电子邮件是否符合 RFC 5322 的电子邮件格式和模式,以及 TLD 是否实际存在。
例如,虽然地址 example@example.ccc 将通过 regex,但它不是有效的电子邮件,因为 ccc 不是 IANA 的顶级域名。
2、确保电子邮件实际存在:这样做,唯一的选择是向用户发送电子邮件。
下面是一个解决方案,它工作,并包括验证 / 通知的幻觉性,以以下形式:
您可以在此链接上运行
雅加达
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
}
form.classList.add('was-validated');
event.preventDefault();
}, false);
}, false);
})();
HTML
<p class='title'>
<b>Email validation</b>
<hr size="30px;">
</p>
<br>
<form id="needs-validation" novalidate>
<p class='form_text'>Try it out!</p>
<div class="form-row">
<div class="col-12">
<input type="email" class="form-control" placeholder="Email Address" required>
<div class="invalid-feedback">
Please enter a valid email address.
</div>
</div>
<div class="row">
<div class="col-12">
<button type="submit"
class="btn btn-default btn-block">Sign up now
</button>
</div>
</div>
</form>
推荐文章
- HTML按钮调用MVC控制器和动作方法
- 使用JavaScript更改URL参数并指定默认值
- 在window.setTimeout()发生之前取消/终止
- 如何删除未定义和空值从一个对象使用lodash?
- Div高度100%,并扩展到适合内容
- 当鼠标经过表中的一行时,将光标更改为手
- HTML实体中间的点
- 检测当用户滚动到底部的div与jQuery
- 使用:before和:after CSS选择器插入HTML
- 在JavaScript中检查字符串包含另一个子字符串的最快方法?
- 检测视口方向,如果方向是纵向显示警告消息通知用户的指示
- ASP。NET MVC 3 Razor:在head标签中包含JavaScript文件
- 禁用从HTML页面中拖动图像
- 使用querySelectorAll检索直接的子节点
- CSS水平定心固定div?