Question

我必须使用JQuery执行身份验证过程。我有两个文本框UserName和Password，两个按钮是Login and Submit。

如果我点击“提交”按钮，那么它将自动激活验证，并且我必须在“登录”按钮上实现此功能。

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

为什么我会这样：

Usin JQuery它正在使用UserName和服务器向服务器发送请求在此期间密码我将显示处理....
然后它将使用数据库验证提供的值并返回响应如果成功或失败，我将显示成功或失败。

以下是代码段：

<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;
    }

注意： -

验证完全适用于提交按钮
使用“登录”按钮完成验证过程（我必须将验证与“登录”按钮集成）

Answer 1

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

为按钮添加标识符：

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

JavaScript的：

$(document).ready(function(){
    $("#SubmitButton").click(function(){
         return checkAuthentication();
    });
});

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

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;
    }
}

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

Answer 2

我已经解决了这个问题： 我只使用了提交按钮

<input id="btnLogin" type="submit" value="Login" />

以下是更新后的代码

<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>

如何在按钮单击而不是提交按钮上触发验证消息

2 个答案: