使用AJAX和JSON验证注册表单

时间:2012-03-23 10:59:14

标签: javascript ajax json validation

我的注册表单中有一个用户名字段。当用户点击“提交”按钮时,它应检查用户名是否为空并且该用户名尚不存在。所以我有这些功能:

function register() {
    var userName = checkIsUsernameExist();
    var passwordMatch = checkPasswordMatch();
    if(userName && passwordMatch){
    $.getJSON("inc/API.php",
        {
            command : "register",
            username : $("#txtNewUsername").attr("value"),
            password : $("#txtNewPassword").attr("value"),
            email : $("#txtEmail").attr("value"),
            phone : $("#txtPhone").attr("value")
        },
        function ()
        {
            $("#divIsRegFormValid").removeClass("registrationFormAlert");
            $("#divIsRegFormValid").addClass("registrationFormConfirm");
            $("#divIsRegFormValid").html("Thank you for registering!");
        }
    );
    } else {
        $("#divIsRegFormValid").removeClass("registrationFormConfirm");
        $("#divIsRegFormValid").addClass("registrationFormAlert");
        $("#divIsRegFormValid").html("Some errors occured. Please register again.");
    }
}



function checkIsUsernameExist(){
    if($("#txtNewUsername").attr("value") == "") {
        $("#divIsUsernameExist").html("");
        return false;
    } else {
    $.getJSON("inc/API.php", 
        {
            command : 'isUsernameExist',
            username : $("#txtNewUsername").attr("value")
        }).done(
        function(result)
        {
            if (result != true){
                $("#divIsUsernameExist").removeClass("registrationFormAlert");
                $("#divIsUsernameExist").addClass("registrationFormConfirm");
                $("#divIsUsernameExist").html("This username is available!");
                return true;
            } else {
                $("#divIsUsernameExist").removeClass("registrationFormConfirm");
                $("#divIsUsernameExist").addClass("registrationFormAlert");
                $("#divIsUsernameExist").html("This username is not available!");
                return false;
            }
        });
    }
}

此时我只收到False,如果用户名为空,如果不是 - 我得到Undefined(用一些Alert命令检查)。那么如果输入用户名并且已经检查是否已经存在这样的用户名,我怎样才能使它工作并返回True或False? 谢谢!

2 个答案:

答案 0 :(得分:0)

.value()首选$("#txtEmail").attr("value") => $("#txtEmail").val();)

答案 1 :(得分:0)

您可能因为html使用$('#txtEmail').val()中没有值属性而未定义。