Asp.net mvc 3 如何在单击按钮而不是提交按钮时触发验证消息

我必须使用JQuery执行身份验证过程。我有两个文本框用户名和密码，两个按钮是登录和提交

如果我点击提交按钮，那么它会自动启动验证，这是好的，我必须在登录按钮点击时实现这一功能

那么如何在单击按钮时实现自动验证？

我为什么喜欢这个：

在JQuery中，它使用用户名和密码向服务器发送请求 密码在此期间我将显示处理

然后，它将使用数据库验证提供的值并返回响应 如果选择成功或失败，则我将显示成功或失败

以下是代码片段：

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.")
@using (Html.BeginForm(null, null, FormMethod.Get, new { id = "Form1", name = "Form1" }))
{
    <table>
        <tr>
            <td>
                User Name
            </td>
            <td>@Html.TextBoxFor(u => u.UserName, new { id = "txtUser" }) @Html.ValidationMessageFor(u => u.UserName)
            </td>
        </tr>
        <tr>
            <td>
                Password
            </td>
            <td>@Html.TextBoxFor(u => u.Password, new { id = "txtPassword" })  @Html.ValidationMessageFor(u => u.Password)
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input type="button" value="Login" onclick="checkAuthentication();" />
                <input type="submit" value="Submit" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="dvStatus" class="loginMessageStatus">
                </div>
            </td>
        </tr>
    </table>
}
<script language="javascript" type="text/javascript">
    function getUserCredentials() {
        var user = jQuery('#txtUserName').val();
        var pass = jQuery('#txtPassword').val();
        return { UserName: user, Password: pass };
    }
    function clearUserCredentials() {
        jQuery('#txtUserName').val("");
        jQuery('#txtPassword').val("");
        jQuery('#txtUserName').focus();
    }
    function checkAuthentication() {
            jQuery('#dvStatus').html("<div class='requestProcess'></div><div class='requestMessage'>Please wait...</div>")
            var postData = getUserCredentials();
            var ajaxResponse = $.ajax({
                type: "post",
                url: '@Url.Action("Index", "Login")',
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(postData),
                success: function (result) {
                    var res = jQuery.parseJSON(result);
                    if (res.Success == true) {
                        jQuery('#dvStatus').html("<div class='requestSuccess'></div><div class='requestMessage'>Your are successfully logged in. Redirecting...</div>")
                        jQuery.doTimeout(100, redirectToPage);
                    }
                    else {
                        jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>Error: " + res.Message + ". <a href='javascript:void(0)' onclick='clearUserCredentials()'>Try Again</a></div>")
                    }
                }
            });
    }
    function redirectToPage() {
        href = '@Url.Action("Index", "TabMaster")';
        window.location.href = href;
    }

@Html.ValidationSummary（true，“登录失败。请更正错误并重试。”）
@使用（Html.BeginForm（null，null，FormMethod.Get，new{id=“Form1”，name=“Form1”}））
{
用户名
@Html.TextBoxFor（u=>u.UserName，new{id=“txtUser”}）@Html.ValidationMessageFor（u=>u.UserName）
密码
@Html.TextBoxFor（u=>u.Password，new{id=“txtPassword”}）@Html.ValidationMessageFor（u=>u.Password）
}
函数getUserCredentials（）{
var user=jQuery（'#txtUserName'）.val（）；
var pass=jQuery（'#txtPassword'）.val（）；
返回{用户名：用户，密码：pass}；
}
函数clearUserCredentials（）{
jQuery（'#txtUserName'）.val（“”）；
jQuery（'#txtPassword'）.val（“”）；
jQuery（'#txtUserName'）.focus（）；
}
函数checkAuthentication（）{
jQuery（'#dvStatus'）.html（“请稍候…”）
var postData=getUserCredentials（）；
var ajaxResponse=$.ajax({
类型：“post”，
url:'@url.Action（“索引”、“登录”），
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
数据：JSON.stringify（postData），
成功：功能（结果）{
var res=jQuery.parseJSON（结果）；
如果（res.Success==true）{
jQuery（'#dvStatus'）.html（“您已成功登录。正在重定向…”）
doTimeout（100，重定向Topage）；
}
否则{
jQuery（'#dvStatus'）.html（“错误：+res.Message+”）
}
}
});
}
函数重定向Topage（）{
href='@Url.Action（“Index”，“TabMaster”）；
window.location.href=href；
}

注意：-

使用“提交”按钮完全可以进行验证

验证过程完全与登录按钮一起工作（只是我必须将验证与登录按钮集成）

---

您可以使用以下事件处理程序单击submit按钮进行验证：

将标识符添加到按钮：

<input id="SubmitButton" type="submit" value="Submit" />

更改验证方法以返回是否失败：

function checkAuthentication() {
    var _user = jQuery.trim(jQuery('#txtUserName').val());
    var _pass = jQuery.trim(jQuery('#txtPassword').val());
    if (_user.length == 0 || _pass.length == 0) {
        jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>User Name and Password are required!</div>")
        return false;
    }
    else {
        jQuery('#dvStatus').html("<div class='requestProcess'></div><div class='requestMessage'>Please wait...</div>")
        var postData = getUserCredentials();
        var ajaxResponse = $.ajax({
            type: "post",
            url: '@Url.Action("Index", "Login")',
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(postData),
            success: function (result) {
                var res = jQuery.parseJSON(result);
                if (res.Success == true) {
                    jQuery('#dvStatus').html("<div class='requestSuccess'></div><div class='requestMessage'>Your are successfully logged in. Redirecting...</div>")
                    jQuery.doTimeout(100, redirectToPage);
                }
                else {
                    jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>Error: " + res.Message + ". <a href='javascript:void(0)' onclick='clearUserCredentials()'>Try Again</a></div>")
                }
            }
        });
        return true;
    }
}

函数checkAuthentication（）{
var#u user=jQuery.trim（jQuery（'#txtUserName'）.val（））；
var#u pass=jQuery.trim（jQuery（'#txtPassword'）.val（））；
如果（_user.length==0 ||_pass.length==0）{
jQuery（“#dvStatus”）.html（“需要用户名和密码！”）
返回false；
}
否则{
jQuery（'#dvStatus'）.html（“请稍候…”）
var postData=getUserCredentials（）；
var ajaxResponse=$.ajax({
类型：“post”，
url:'@url.Action（“索引”、“登录”），
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
数据：JSON.stringify（postData），
成功：功能（结果）{
var res=jQuery.parseJSON（结果）；
如果（res.Success==true）{
jQuery（'#dvStatus'）.html（“您已成功登录。正在重定向…”）
doTimeout（100，重定向Topage）；
}
否则{
jQuery（'#dvStatus'）.html（“错误：+res.Message+”）
}
}
});
返回true；
}
}

---

如果验证失败，则应停止提交。

您可以使用以下事件处理程序单击提交按钮进行验证：

将标识符添加到按钮：

<input id="SubmitButton" type="submit" value="Submit" />

更改验证方法以返回是否失败：

function checkAuthentication() {
    var _user = jQuery.trim(jQuery('#txtUserName').val());
    var _pass = jQuery.trim(jQuery('#txtPassword').val());
    if (_user.length == 0 || _pass.length == 0) {
        jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>User Name and Password are required!</div>")
        return false;
    }
    else {
        jQuery('#dvStatus').html("<div class='requestProcess'></div><div class='requestMessage'>Please wait...</div>")
        var postData = getUserCredentials();
        var ajaxResponse = $.ajax({
            type: "post",
            url: '@Url.Action("Index", "Login")',
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(postData),
            success: function (result) {
                var res = jQuery.parseJSON(result);
                if (res.Success == true) {
                    jQuery('#dvStatus').html("<div class='requestSuccess'></div><div class='requestMessage'>Your are successfully logged in. Redirecting...</div>")
                    jQuery.doTimeout(100, redirectToPage);
                }
                else {
                    jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>Error: " + res.Message + ". <a href='javascript:void(0)' onclick='clearUserCredentials()'>Try Again</a></div>")
                }
            }
        });
        return true;
    }
}

函数checkAuthentication（）{
var#u user=jQuery.trim（jQuery（'#txtUserName'）.val（））；
var#u pass=jQuery.trim（jQuery（'#txtPassword'）.val（））；
如果（_user.length==0 ||_pass.length==0）{
jQuery（“#dvStatus”）.html（“需要用户名和密码！”）
返回false；
}
否则{
jQuery（'#dvStatus'）.html（“请稍候…”）
var postData=getUserCredentials（）；
var ajaxResponse=$.ajax({
类型：“post”，
url:'@url.Action（“索引”、“登录”），
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
数据：JSON.stringify（postData），
成功：功能（结果）{
var res=jQuery.parseJSON（结果）；
如果（res.Success==true）{
jQuery（'#dvStatus'）.html（“您已成功登录。正在重定向…”）
doTimeout（100，重定向Topage）；
}
否则{
jQuery（'#dvStatus'）.html（“错误：+res.Message+”）
}
}
});
返回
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        //$.preloadCssImages();
        $("#btnLogin").click(function () {
            if ($("#Form1").valid() == true) {
                checkAuthentication();
                return false;
            }
        });
    });
    function getUserCredentials() {
        var user = jQuery('#txtUserName').val();
        var pass = jQuery('#txtPassword').val();
        return { UserName: user, Password: pass };
    }
    function clearUserCredentials() {
        jQuery('#txtUserName').val("");
        jQuery('#txtPassword').val("");
        jQuery('#txtUserName').focus();
    }
    function checkAuthentication() {
        jQuery('#dvStatus').html("<div class='requestProcess'></div><div class='requestMessage'>Please wait...</div>")
        var postData = getUserCredentials();
        var ajaxResponse = $.ajax({
            type: "post",
            url: '@Url.Action("Index", "Login")',
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(postData),
            success: function (result) {
                var res = jQuery.parseJSON(result);
                if (res.Success == true) {
                    jQuery('#dvStatus').html("<div class='requestSuccess'></div><div class='requestMessage'>Your are successfully logged in. Redirecting...</div>")
                    jQuery.doTimeout(100, redirectToPage);
                }
                else {
                    jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>Error: " + res.Message + ". <a href='javascript:void(0)' onclick='clearUserCredentials()'>Try Again</a></div>")
                }
            }
        });
    }
    function redirectToPage() {
        href = '@Url.Action("Index", "TabMaster")';
        window.location.href = href;
    }
</script>