随笔 - 173 文章 - 19 评论 - 26 阅读 - 22万

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");
            }
        });
        }
};