立即验证客户端的电子邮件字段

Posted 2023-02-22

【中文标题】立即验证客户端的电子邮件字段

【英文标题】：Immediately validate email fields on client side

【发布时间】：2014-08-02 13:23:55

【问题描述】：

我的视图模型中有以下属性：

[EmailAddress]
[DataType(DataType.EmailAddress)]
public string Email  get; set; 

并使用以下剃刀视图进行渲染：

@html.LabelFor(m => m.Email)
@Html.EditorFor(m => m.Email)
@Html.ValidationMessageFor(m => m.Email)

这会产生以下 html 输出（请参阅 type="email"，这是我想要的）：

<input data-val="true" data-val-email="The Email field is not a valid e-mail address." id="Email" name="Email" type="email" value="">

我还将ClientValidationEnabled 和UnobtrusivejavascriptEnabled 设置为true。所需等的验证按预期工作。但在更改输入字段中的字符或关注另一个输入字段后，不会立即触发此电子邮件字段的验证。

首先，我的浏览器提示它不是有效的电子邮件地址。但是当我输入sfsdf@sdfsfd 时，我的浏览器 (Chrome) 将其检测为有效的电子邮件地址，然后来自 ASP.NET MVC 的电子邮件验证器说它不是有效的格式。但是只有当我点击提交按钮时才会触发 ASP.NET 验证器（浏览器验证也只在提交时触发，但这不是问题，因为无论如何我都会禁用浏览器验证）。

当我使用@Html.TextBoxFor() 而不是@Html.EditorFor() 时，它会生成以下标记（使用type="text"）：

<input data-val="true" data-val-email="The Email field is not a valid e-mail address." id="Email" name="Email" type="text" value="">

现在，当更改输入字段中的任何字符或聚焦另一个字符时，会立即触发验证。我需要type="email"。

是否可以立即对电子邮件字段强制验证？

【参考方案1】：

Type=email 是 HTML5 标记。我正在比较我的两个项目，其中另一个使用旧的 jquery 验证器插件，它似乎不适用于电子邮件类型。然而，较新的项目使用了最新的验证器，并且运行良好。

尝试更新您的 jquery 验证器插件。

【讨论】：

完美，谢谢。我使用的是 1.8.0。这似乎是旧的;-)

【参考方案2】：

 [RegularExpression(@"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]1,3\.[0-9]1,3\.[0-9]1,3\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]2,4|[0-9]1,3)(\]?)$", ErrorMessage = "Email is not valid.")]

试试这个属性

【讨论】：

这并不能解决问题。问题在于 type=email 而不是验证器本身。