实时验证用户名是否重复

    现在很多网站在注册用户名时,你只要输入好要注册的用户名后,不用提交请求就可以实时的显示用户名是否可用,重复等。这总情况下不能刷新页面,而要把用户名提交到后台比对,后台把结果返回到前端,前端再显示出用户名是否可用。下面将使用JQuery的ajax方法,和JQuery的表单功能来实现我们的需求

JQuery ajax方法

此方法可以提交任何地方的数据到后台,实现代码如下

$(function () {
    var old_data = $("#id_ServerName").val();
    $("#id_ServerName").change(function () {
        var data = $("#id_ServerName").val();
        if (data !== old_data){
            $.ajax({
                url: "/am/check",
                type: "post",
                data: {"host_name": data},
                success: function (arg) {
                    if (arg === "Error"){
                        $("#id_error_info").removeClass("error_info");
                        return false;
                    }else if (arg === "OK") {
                        $("#id_error_info").addClass("error_info");
                    }else{
                        console.log("OK");
                    }
                },
                fail: function () {
                }
            })
        }else {
            $("#id_error_info").addClass("error_info");
        }
    })
});


JQuery 表单验证

此方法可提交form表单内指定的数据到后台,此外表单功能对ajax做了一些封装,使其使用更简单,更方便,推荐使用

猜你喜欢

转载自blog.51cto.com/270142877/2129054