Question

我正在为我的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; }

工作正常并显示消息。

如果电子邮件无效，我想停止用户，那么在电子邮件不正确之前，用户不能在第二个文本框中输入确认电子邮件。怎么做？有人请帮助我。

Answer 1

如果电子邮件无效，您可以添加自定义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
    }
})

Answer 2

这只是一个提示：

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

[编辑] 刚刚进行了快速测试，它确实有效。这里的诀窍是检查helper生成的输入验证类，如果它重新关注输入：

@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);" })

Answer 3

假设您正在使用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;
    };
});

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

3 个答案: