@Html.Textbox 验证和 onclick=confirm 不能一起工作答案

【问题标题】：@Html.Textbox validation and onclick=confirm don't work together@Html.Textbox 验证和 onclick=confirm 不能一起工作
【发布时间】：2018-03-05 14:59:31
【问题描述】：

我有如下代码：

@using (Html.BeginForm("UpdateEmail", "Default"))
{
    @Html.TextBox("emailAddress", "", new
    {
        @type = "email", 
        @required = "true", 
        @pattern = "[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}"})        
    }
    <input type="submit" value="Submit" onclick="return confirm('Are you sure you wish to proceed?')" />
}

问题是，电子邮件验证消息和“onclick='return confirm()'”两者不能一起使用。它是一个或另一个。我该怎么办？

【问题讨论】：

你为什么不使用内置的 mvc 客户端验证（开箱即用） - 即通过添加验证属性并使用 jquery,validate.js and jquery.validate.unobtrusive.js` 插件.而且您的代码仅在浏览器中提供 HTML-5 验证，任何人都可以绕过它，因此您只需在服务器中重新重复验证即可。

标签： c# asp.net-mvc html razor model-view-controller

【解决方案1】：

我在我的项目中做过类似的事情，但我只是在 JQuery 中相应地启用/禁用提交按钮。

$("#txtEmail").on("blur", function () {
        var email = $(this).val().toString();
        var pattern = "YOUR_PATTERN";

        if (email.match(pattern)) {
            alert("valid");
            //Enable Submit button
        } else {
            alert("invalid");
            //Disable submit button
        }
    });

您当然也可以拦截表单的提交，然后验证那里的内容。将按钮的类型更改为“按钮”并捕获点击事件。还要为您的表单指定一个名称。可以更轻松地选择发布。

 @using (Html.BeginForm("UpdateEmail", "Default", FormMethod.Post, new { id = "frmMyEmailForm" }))
 {
 }

 $("#btnSubmitForm").on('click', function () {

        var email = $("#txtEmail").val().toString();
        var pattern = "YOUR_PATTERN";

        if (email.match(pattern)) {
            $("#frmMyEmailForm").submit();
        } else {
            alert("invalid");
            //Disable submit button
        }
    });

与上述类似的东西应该可以满足您的需求。

谢谢

【讨论】：

【解决方案2】：

您可以在 jquery onclick 中手动调用不显眼的验证

function submitForm(action) {
var $form = $("#myForm");
$form.action = "/Area/MyController/" + action;

$.validator.unobtrusive.parse($form);
$form.validate();

if ($form.valid()) {
  return confirm('Are you sure you wish to proceed?');
}
}

【讨论】：