zoukankan      html  css  js  c++  java
  • 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");
                }
            });
            }
    };
  • 相关阅读:
    FlowNet2.0论文笔记
    LeetCode NO477.汉明距离总和
    自然语言的分词方法之N-gram语言模型
    C++函数模板及其实例化和具体化
    Vue2源码解读(5)
    Vue2源码解读(4)
    Vue2源码解读(3)
    Vue2源码解读(2)
    Vue2源码解读(1)
    vue的双向绑定原理及实现
  • 原文地址:https://www.cnblogs.com/smallerpig/p/3646114.html
Copyright © 2011-2022 走看看