javascript - 如何防止将数据传递给 Controller

Question

如果表单未通过验证，如何防止将模型发送到 Controller ？

Razor

@using (Html.BeginForm("Login", "Login", FormMethod.Post))
{
    <div>
        <div class="form-group input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            @Html.TextBoxFor(model => model.AccountName, new { @id = "accountNameText", @class = "form-control", @placeholder = "Account name" })
        </div>
        <div class="form-group input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
            @Html.TextBoxFor(model => model.Password, new { @id = "accountPasswordText", @class = "form-control", @placeholder = "Password" })
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-success btn-block" onclick="valideLogin()">Login</button>
        </div>
        <span id="loginStatusMessege" style="color: red">

        </span>
    </div>
}

jQuery

function valideLogin() {
    var accName = $('#accountNameText');
    var accPass = $('#accountPasswordText');

    if (accName.val() === '' || accName.val() === '') {
        $('#loginStatusMessege').html('Account name and password cannot be blank.');
    }
}

在我按下登录按钮并且文本框未填充后，代码成功进入 jQuery 并响应错误，但每次我进入 Controller 时仍然如此。我如何防止此操作？

Answer 1

为您的表单分配一个标识符，使其在提交事件处理程序中有效。

@using (Html.BeginForm("Login", "Login", FormMethod.Post, new { @id = "myForm")){
}

使用 jQuery 绑定(bind)提交事件，在事件处理程序中使用 event.preventDefault()条件不满足时取消表单的默认 Action 。

$("#myForm").submit(function(event){
    var accName = $('#accountNameText');
    var accPass = $('#accountPasswordText');

    if (accName.val() === '' || accName.val() === '') {
        $('#loginStatusMessege').html('Account name and password cannot be blank.');
        event.preventDefault();
    }
})