0

一个简单的注册表单有一个字段“Preferred login id (username)”。用户输入电子邮件后，我通过将其与数据库值进行比较来验证输入的用户名（如果它已经存在或不存在）。为此，我正在使用 jquery 的 $.ajax 方法进行服务器调用。

<script>
$('#txtPreferredLogin').focusout(function () {
            $.ajax({
                type: "POST",
                url: "../Login.aspx/CheckUserName",
                async: false,`enter code here`
                data: "{userName: '" + $('#txtPreferredLogin').val() + "' }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    $('#valid').html("<img src='Images/waiting.gif' alt='Checking username!'>");
                    var delay = function () {
                        AjaxSucceeded(response);
                    };
                    setTimeout(delay, 500);
                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        });

        function AjaxSucceeded(result) {
            if (result.d == true) {
                $('#valid').html("<img src='Images/2_Not.png' alt='Username taken!'>");
            }
            else {
                $('#valid').html("<img src='Images/1_available.png' alt='Username available!'>");
            }
        }

        $.validator.addMethod('notNone', function (value, element) {
            return (value != '0');
        });

        $(function () {
            $("#regi1").validate(
            {
                rules:
                {
                    ddlCity:
                      {
                          required: true,
                          notNone: true
                      },
                    txtDOB:
                      {
                          required: true,
                          dpDate: true
                      }
                },
                messages: {
                    ddlCity: "Please select city",
                    txtDOB: "Please enter a valid date (dd-mm-yyyy)"
                }
            });
        });

</script>

服务器端代码是

public bool getVal(string userName)
        {
            var query = from p in context.tblBasicDetails
                        where p.LoginId == userName.Trim()
                        select p;
            if (query.Any())
            {
                return true;
            }
            else
            {
                return false;
            }
        }

        [WebMethod]
        public static bool CheckUserName(string userName)
        {
            Login l = new Login();
            return (l.getVal(userName));
        }

现在，当用户名不可用时，它会显示其不可用的消息（图像）。但是我在这些字段下方有“保存”按钮，单击哪个整个表单得到验证，即它不会回发页面，直到所有字段都有效，除非用户名不可用。现在，如果用户名不可用，我不想进行回发。我需要对代码进行哪些更改？

4

2 回答 2

1

正如 Riaz 所说，远程验证非常有帮助，但在您的情况下，您已经在检查用户名，因此您不想再次访问服务器。

jquery 具有您可以使用的 .data 函数。

function AjaxSucceeded(result) {
    if (result.d == true) {
        $('#valid').html("&lt;img src='Images/2_Not.png' alt='Username taken!'>");
        $("#txtPreferredLogin").data("available", false); //add data
    } else {
        $('#valid').html("&lt;img src='Images/1_available.png ' alt='        Username available!'>");
        $("#txtPreferredLogin").data("available", true); //add data
    }
}

//add validator
$.validator.addMethod('
        available ', function(value, element) {
    return $(element).data("available");
});



$(function() {
    $("#regi1").validate({
        rules: {
            txtPreferredLogin: {
                required: true,
                available: true
            },
            ddlCity: {
                required: true,
                notNone: true
            },
            txtDOB: {
                required: true,
                dpDate: true
            }
        },
        messages: {
            ddlCity: "Please select city",
            txtDOB: "Please enter a valid date (dd-mm-yyyy)"
        }
    });
});
于 2012-07-04T06:27:06.017 回答
0

如果您使用 jQuery 表单验证，那么您必须使用远程验证。由验证框架提供

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://ceedubs.github.com/blog/2011/11/22/custom-remote-validation-with-jquery/

希望这会有所帮助

于 2012-07-04T06:00:19.867 回答