Col*_*ton 41 html5 html-input email-validation html-email
我正在尝试制作一个包含一个电子邮件输入,一个复选框输入和一个提交输入的html5表单.我正在尝试使用模式属性进行电子邮件输入,但我不知道在此属性中放置什么.我知道我应该使用一个必须与JavaScript Pattern生产匹配的正则表达式,但我不知道如何做到这一点.
我试图让这个属性做的是检查以确保电子邮件包含一个@和至少一个或多个点,如果可能,检查@后面的地址是否是真实地址.如果我不能通过这个属性做到这一点,那么我将考虑使用JavaScript但是为了检查一个@和一个或多个点,我确实想要使用pattern属性.
pattern属性需要检查:
这个的替代方法是使用JavaScript但是对于所有其他条件我不想使用JavaScript
小智 61
我有HTML5s电子邮件输入的确切问题,使用上面的Alwin Keslers答案,我将正则表达式添加到HTML5电子邮件输入,因此用户必须在最后有.something.
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
小智 41
这是一个双重问题(在万维网世界中很多).
您需要评估浏览器是否支持html5(我使用Modernizr来执行此操作).在这种情况下,如果您有一个普通的表单,浏览器将为您完成工作,但如果您需要ajax/json(尽可能多的日常情况),您仍需要执行手动验证.
..所以,我的建议是在提交前随时使用正则表达式进行评估.我使用的表达式如下:
var email = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;
这个来自http://www.regular-expressions.info/.这是一个难以理解和掌握的世界,所以我建议你仔细阅读本页.
Ant*_*nov 27
不幸的是,除了B-Money之外的所有建议在大多数情况下都是无效的.
这里有很多有效的电子邮件,例如:
由于验证的复杂性,我提出了一个非常通用的解决方案:
<input type="text" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Invalid email address" />
它检查电子邮件是否在"@"之前包含至少一个字符(也是除了另一个"@"或空格之外的数字或其他任何字符),至少两个字符(或除了另一个"@"或空白之外的任何字符)在"@"之后和一个点中之间.此模式不接受像lol @ company这样的地址,有时在内部网络中使用.但如果需要,可以使用这个:
<input type="text" pattern="[^@\s]+@[^@\s]+" title="Invalid email address" />
两种模式也接受效果较差的电子邮件,例如带有垂直标签的电子邮件.但对我来说这已经足够了.无论如何,在服务器端都应该进行更强大的检查,例如尝试连接到邮件服务器或ping域.
顺便说一句,我刚刚novalidate根据上面的模式编写了有关电子邮件验证的角度指令(尚未经过良好测试)以支持DRY原则:
.directive('isEmail', ['$compile', '$q', 't', function($compile, $q, t) {
var EMAIL_PATTERN = '^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$';
var EMAIL_REGEXP = new RegExp(EMAIL_PATTERN, 'i');
return {
require: 'ngModel',
link: function(scope, elem, attrs, ngModel){
function validate(value) {
var valid = angular.isUndefined(value)
|| value.length === 0
|| EMAIL_REGEXP.test(value);
ngModel.$setValidity('email', valid);
return valid ? value : undefined;
}
ngModel.$formatters.unshift(validate);
ngModel.$parsers.unshift(validate);
elem.attr('pattern', EMAIL_PATTERN);
elem.attr('title', 'Invalid email address');
}
};
}])
用法:
<input type="text" is-email />
对于B-Money来说,模式就是"@"就足够了.但是它会减少两个或更多"@"和所有空格.
Ant*_*ony 23
在HTML5中,您可以使用新的"电子邮件"类型:http://www.w3.org/TR/html-markup/input.email.html
例如:
<input type="email" id="email" />
如果浏览器实现HTML5,它将确保用户在该字段中输入了有效的电子邮件地址.请注意,如果浏览器未实现HTML5,则会将其视为"文本"类型,即:
<input type="text" id="email" />
MMM*_*ION 10
一个简单的好答案可以是这样的输入：
\n2021 更新并支持 IE10+
\n^(?![_.-])((?![_.-][_.-])[a-zA-Z\\d_.-]){0,63}[a-zA-Z\\d]@((?!-)((?!--)[a-zA-Z\\d-]){0,63}[a-zA-Z\\d]\\.){1,2}([a-zA-Z]{2,14}\\.)?[a-zA-Z]{2,14}$
input:not(:placeholder-shown):invalid{\n background-color:pink;\n box-shadow:0 0 0 2px red;\n}\n/* :not(:placeholder-shown) = when it is empty, do not take as invalid */\n/* :not(:-ms-placeholder-shown) use for IE11 */\n/* :invalid = it is not followed pattern or maxlength and also if required and not filled */\n/* Note: When autocomplete is on, it is possible the browser force CSS to change the input background and font color, so i used box-shadow for second option*/Type your Email:\n<input \n type="email"\n name="email"\n lang="en"\n maxlength="254"\n value=""\n placeholder="example@domain.com"\n autocapitalize="off" spellcheck="false" autocorrect="off"\n autocomplete="on"\n required=""\n inputmode="email"\n pattern="(?![_.-])((?![_.-][_.-])[a-zA-Z\\d_.-]){0,63}[a-zA-Z\\d]@((?!-)((?!--)[a-zA-Z\\d-]){0,63}[a-zA-Z\\d]\\.){1,2}([a-zA-Z]{2,14}\\.)?[a-zA-Z]{2,14}">根据以下情况：
\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode \n https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email
\n注意：现在，URL 中可以包含更长的地址甚至 Unicode 字符，用户也可以向本地或 IP 发送电子邮件，但我认为如果目标页面是公共的，最好不要接受不寻常的内容。
\n正则表达式的解释：
\n(?![_.-])不是从这些开始的：_。-((?!--)[a-zA-Z\\d-])接受 a 到 z 和 A 到 Z 以及数字和 -（破折号），但不接受 --((?![_.-][_.-])[a-zA-Z\\d_.-])从 a 到 z 小写，A 到 Z 大写，数字以及 _ 。- 接受但不接受任何类型的双重。{0,63}长度从 0 到 63（第二组[a-zA-Z\\d]将填充 +1，但不要让该字符为 _ 。-）@at 符号(rule){1,2}该规则应该存在 1 到 2 次。（对于子域和域）(rule)?或((rule)|)不存在或如果存在应遵循规则。（适用于二级扩展）\\.点注意：为了更严格，您可以从模式中uppercase删除所有内容。A-Z
注意：如果不严格，Persian/Arabic numbers \xd9\xa0\xd9\xa1\xd9\xa2\xd9\xa3\xd9\xa4\xd9\xa5\xd9\xa6\xd9\xa7\xd9\xa8\xd9\xa9 \xdb\xb0\xdb\xb1\xdb\xb2\xdb\xb3\xdb\xb4\xdb\xb5\xdb\xb6\xdb\xb7\xdb\xb8\xdb\xb9可以在模式中添加\\u0660-\\u0669\\u06f0-\\u06f9next to all 。\\d
尝试正则表达式：https: //regexr.com/64kjf
\n注意：^...$在输入模式中不需要使用，但对于一般的正则表达式测试将需要。这意味着字符串的开始/结束应该与规则相同，而不仅仅是一部分。
属性解释：
\ntype="email"或者type="text"（email在现代浏览器中将有助于验证，而且它不关心验证或获取值的开头或结尾的空格）
name="email" autocomplete="on"让浏览器记住上次填写的简单输入以自动完成
lang="en"帮助默认输入是英文
inputmode="email"将有助于触摸键盘更加兼容
maxlength="254"设置输入的最大长度
autocapitalize="off" spellcheck="false" autocorrect="off"关闭浏览器中可能出现错误的自动更正器
required=""此字段为必填项，如果为空或无效，则不会提交表单
pattern="..."里面的正则表达式将检查验证
\\w=a-zA-Z\\d_所以：
最轻版本
\n(?![_.-])((?![_.-][_.-])[\\w.-]){0,63}[a-zA-Z\\d]@((?!-)((?!--)[a-zA-Z\\d-]){0,63}[a-zA-Z\\d]\\.){1,2}([a-zA-Z]{2,14}\\.)?[a-zA-Z]{2,14}
这是我正在使用的方法,您可以根据您的需要进行修改:
^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$
说明:
我们希望确保电子邮件地址始终以单词开头:
^ [\ W]
一个词是任何字符,数字或下划线.你可以使用[a-zA-Z0-9_]模式,但它会给你相同的结果,但它会更长.
接下来,我们要确保至少有一个这样的角色:
^ [\ w] {1,}
接下来,我们希望允许名称中的任何单词,数字或特殊字符.这样,我们可以确定电子邮件不会以点开头,但可以包含除第一个位置以外的点:
^ [\ w] {1,} [\ w.+ - ]
当然,没有任何这样的字符,因为电子邮件地址只能跟一个字母后跟@:
^ [\ w] {1,} [\ w.+ - ] {0,}
接下来,我们需要@字符是强制性的,但整个电子邮件中只能有一个:
^ [\ w] {1,} [\ w.+ - ] {0,} @
在@字符后面,我们想要域名.在这里,您可以定义最少的字符数和字符范围.我会选择所有单词字符,包括连字符[\ w-],我想要至少其中两个{2,}.如果你想允许像t.co这样的域,你必须允许这个范围内的一个字符{1,}:
^ [\ w] {1,} [\ w.+ - ] {0,} @ [\ w - ] {2,}
接下来,我们需要处理两个案例.要么存在只是域名,然后域扩展名,或有子域名其次是域名后跟扩展名,例如,abc.com与abc.co.uk.为了使这项工作,我们需要使用(a | b)标记,其中a代表第一种情况,b代表第二种情况,| 代表逻辑OR.在第一种情况下,我们将只处理域扩展,但由于它总是存在,无论如何,我们可以安全地将它添加到两种情况:
^ [\ w] {1,} [\ w.+ - ] {0,} @ [\ w - ] {2,} ([.] [a-zA-Z] {2,} | [.] [一个-ZA-Z] {2,})
这种模式表明我们只需要一个点字符后跟字母,没有数字,在这两种情况下我们至少需要其中两个.
对于第二种情况,我们将在域扩展名前添加域名,从而使原始域名成为子域名:
^ [\ w] {1,} [\ w.+ - ] {0,} @ [\ w - ] {2,}([.] [a-zA-Z] {2,} | [.] [\w - ] {2,} [.] [a-zA-Z] {2,})
域名可以包含单词字符,包括连字符,我们在这里至少需要两个字符.
最后,我们需要标记整个模式的结束:
^ [\ W] {1,} [\ W + - .] {0,} @ [\瓦特- ] {2,}([A-ZA-Z] {2,} [.] | [.] [\w - ] {2,} [.] [a-zA-Z] {2,})$
到这里测试您的电子邮件是否与模式匹配:https://regex101.com/r/374XLJ/1
<input name="email" type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" class="form-control" placeholder="Email*" id="email" required="">
这是上述解决方案的修改版本,也接受大写字母.
你可能想要这样的东西。注意属性：
<input type="email" value="" name="EMAIL" id="EMAIL" placeholder="your@email.com" autofocus required pattern="[^ @]*@[^ @]*" />
abc@example.com # Minimum three characters
ABC.xyz@example.com # Accepts Caps as well.
abce.xyz@example.co.in # Accepts . before @
<input type="email" pattern="[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" />
另一种基于 w3org 规范构建的解决方案。
\n原始正则表达式取自w3org。
\n此正则表达式中的最后一个“ *惰性量词”已替换为“ +一个或多个量词”。
\n这种模式完全符合规范，但有一个例外：它不允许顶级域地址，例如“ foo@com ”
<input\n type="email" \n pattern="[a-zA-Z0-9.!#$%&\xe2\x80\x99*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)+"\n title="valid@email.com"\n placeholder="valid@mail.com"\n required>\n如果你不想写一个关于电子邮件标准的白皮书，那么使用我下面的例子，它只是引入了一个众所周知的 CSS 属性（文本转换：小写）来解决问题：
如果您确实不希望数据以小写 value 的形式到达服务器端，那么您应该这样做：
<input type="email" name="email" id="email" pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}" style="text-transform: lowercase" placeholder="enter email here ..." required />如果您确实希望数据以小写 value 的形式到达服务器端，那么您应该这样做：
const emailElmtRegex = new RegExp('[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}');
document.getElementById("entered").innerHTML = "";
document.getElementById("send").innerHTML = ""
function lower() {
let emailElmt = document.getElementById("email");
document.getElementById("entered").innerHTML = "Entered: " + emailElmt.value;
emailElmt.value = emailElmt.value.toLowerCase();
if (emailElmtRegex.test(emailElmt.value)) {
document.getElementById("send").innerHTML = "Send: " + emailElmt.value;
} else {
document.getElementById("send").innerHTML = ""
}
}input[type=email]#email {
"text-transform: lowercase
}<!DOCTYPE html>
<html>
<body>
<h3>Client Side to Server Side - Simple Email validation!</h3>
<input type="email" name="email" id="email" pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}" placeholder="enter email here ..." required oninput="lower()" />
<p id="entered">Entered:</p>
<p id="send">Send:</p>
</body>
</html>小智 5
<input type="email" pattern="^[^ ]+@[^ ]+\.[a-z]{2,6}$">
| 归档时间： |
|
| 查看次数： |
218199 次 |
| 最近记录： |