Ajax实现登陆并友好提示错误信息

记录一个有用的js代码，其效果是点击提交表单后动态提示信息。

可以修改返回成功部分完成页面的跳转。

function validateForm() {

    return $("#form1").validate({

        rules: {

            userName: { required: true, maxlength: 10 },

            password: { required: true, maxlength: 10 }

        },

        messages: {

            userName: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") },

            password: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") }

        }

    }).form();

};

function doSubmit() {

    console.log("click!");

 

    if (validateForm()) {

        console.log("validate success!");

 

        var usernama = $("#userName").val();

        var password = $("#password").val();

        console.log("username:" + usernama);

        console.log("password:" + password);

        var data = { 'userName': usernama, 'password': password };

 

        $.ajax({

            type: "POST",

            data: JSON.stringify(data),

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: function (data) {

                console.log(data);

 

                if (this.result == "OK") {

                    console.log("respon success");

                    //do some thing!

                }

                else {

                    $("#loginInfor").css({ "display": "block", "opacity": "1" });

                    $("#loginInfor").animate({ opacity: 0 }, 2000);

                    $("#loginInfor").html("用户名密码错误");

                    console.log("respon success, but the password is worry!");

                }

            },

            error: function () {

                console.log("respon error");

            }

        });

        }

};