如何在移动到下一个文本框之前强制用户输入有效的电子邮件？

Posted 2023-02-22

【中文标题】如何在移动到下一个文本框之前强制用户输入有效的电子邮件？

【英文标题】：How to force user to enter valid Email before moving to next textbox?

【发布时间】：2013-10-15 08:12:46

【问题描述】：

我在我的 MVC 项目中为电子邮件 ID 和确认电子邮件 ID 使用 2 个文本框。

在视图中：

@html.TextBoxFor(m => m.Email, new  maxlength = 50, title = "Enter Email" )
@Html.ValidationMessageFor(m => m.Email)
@Html.TextBoxFor(m => m.ReEmail, new  maxlength = 50, title = "Confirm Email" )
@Html.ValidationMessageFor(m => m.ReEmail)

在视图模型上：

    [DisplayName("Email")]
    [Required(ErrorMessage = "Please enter Email")]
    [RegularExpression(RegexTypes.EMAIL, ErrorMessage = RegexTypes.EMAIL_MESSAGE)]
    public string Email  get; set; 

    [DisplayName("Confirm Email")]
    [Required(ErrorMessage = "Please re enter Email")]
    [RegularExpression(RegexTypes.EMAIL, ErrorMessage = RegexTypes.CONFIRM_EMAIL_MESSAGE)]
    [DataType(DataType.EmailAddress)]
    [System.Web.Mvc.Compare("Email", ErrorMessage = "The email and confirmation email does not match.")]
    public string ReEmail  get; set; 

它工作正常并显示消息。

如果电子邮件无效，我想停止用户，然后用户不应该能够在第二个文本框中输入确认电子邮件，直到电子邮件不正确。怎么做？有人请帮帮我。

【参考方案1】：

假设您使用的是 jQuery.validate，您只需将验证函数封装在自己的代码中即可。请注意，此代码将触发您页面上所有经过 jquery 验证的电子邮件。

$(function() 
    // track original validation method
    var originalMailValidator = $.validator.methods.email;

    var keepFocus = function() 
        var that = this;
        setTimeout(function()  that.focus(); , 0);
    ;

    // encapsulate the original validation function in custom
    // function which keeps focus
    $.validator.methods.email = function(value, element) 
        $(element).unbind('blur', keepFocus);
        var result = originalMailValidator.apply(this, [value, element]);
        if (!result)
            $(element).bind('blur', keepFocus);
        return result;
    ;
);

【参考方案2】：

这只是一个提示：

@Html.TextBoxFor(m => m.Email, new  maxlength = 50, title = "Enter Email", onblur="regainFocusOnError()" )

[编辑] 刚刚运行了一个快速测试，它可以工作。这里的技巧是检查助手生成的输入验证类，如果它重新获得对输入的关注：

@Html.TextBoxFor(m => m.UserName, 
new  maxlength = 50, title = "Enter Email", onblur="var me = this; setTimeout(function()  if($(me).hasClass('input-validation-error'))  me.focus();  , 0);" )

【讨论】：

什么是rereaseFocusOnError()？

您自己的 js 函数，最后带有 .focus() 和可能的 .select()。不过也可以写整个 js 行

让我们说：onblur="var me = this; setTimeout(function() if(!isEmailValid()) me.focus(); , 0);"

【参考方案3】：

如果电子邮件无效，您可以添加自定义 jQuery，以便在确认文本框获得焦点时重新关注电子邮件文本框。

$("#confirmTextBox").focusin(function() 
    if (!emailIsValid())
    
        $("#emailTextboxID").focus();
    
);

其中 emailIsValid() 是您自己的方法。

如果您想进一步阻止用户的操作，您可以在邮件文本框的模糊上执行此操作（这意味着在电子邮件有效之前他无法将其他任何内容集中在页面上）。

$("#emailTextboxID").blur(function() 
    if (!emailIsValid())
    
        $(this).focus();
    
);

最后，你也可以禁用tab键：

//disable the tab key
$(document).keydown(function(objEvent) 
    if (objEvent.keyCode == 9)   //tab pressed
        objEvent.preventDefault(); // stops its action
    
)