在 Jquery 中添加 JS 函数以检查用户名是否可用

Question

我想问关于JS函数的问题，现在我想函数是检查用户名 这是我的 JS 代码：

jQuery.validator.addMethod("noSpace", function(value, element) { 
    return value.indexOf(" ") < 0 && value != ""; 
    });

    $().ready(function()
    {
        $("#signupForm").validate(
        {
            rules:
            {
                full_name: "required",
                username: {
                    required: true,
                    minlength: 2,
                    noSpace: true,
                },
                password: {
                    required: true,
                    minlength: 5
                },
                email: {
                    required: true,
                    email: true
                },
            },
            messages:
            {
                full_name: "Please enter your full name",
                username:
                {
                    required: "Please enter a username",
                    minlength: "Your username must consist of at least 2 characters",
                    noSpace: "No space allowed",
                },

                password:
                {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                },

                email: "Please enter a valid email address"
            }
        });
    });

那么我如何添加该功能以检查可用用户名并将其显示在输入文本用户名下方（如果可用或不可用），如果可用用户可以继续提交表单。如果没有，用户将无法继续提交表单。

为了检查用户名，我使用 PHP 语言和 Mysql 数据库。

有什么想法吗？

Answer 1

尝试使用此示例，注意此处如何使用 checkAvailability

$(document).ready(function() {
jQuery.validator.addMethod("checkAvailability",function(value,element){
 var x= $.ajax({
    /*Setting of request*/
 }).responseText;

 if($("message", x).text()=="true") return true;
 else return false;
},"Sorry, this user name is not available");

$("#loginForm").validate({
    rules:  {
        username: {
            required: true,
            minlength: 4,
            checkAvailability: true
        },
    },

    submitHandler: function(form){send()}
});
});