文档章节

js-1

hyhlinux
 hyhlinux
发布于 2016/12/02 10:30
字数 278
阅读 10
收藏 0

    1.html

   <form class="form-login">
            <div class="form-group form-group-lg">
                <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-user fa-lg fa-fw"></i></div>
                    <input type="number" class="form-control" name="mobile" id="mobile" placeholder="手机号" required>
                </div>
            </div>
            <div class="error-msg" id="mobile-err"><i class="fa fa-exclamation-circle"></i><span></span></div>
            <div class="form-group form-group-lg">
                <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-lock fa-lg fa-fw"></i></div>
                    <input type="password" class="form-control" name="password" id="password" placeholder="密码" required>
                </div>
            </div>
            <div class="error-msg" id="password-err"><i class="fa fa-exclamation-circle"></i><span></span></div>
            <button type="submit" class="btn btn-lg btn-theme btn-block">登录</button>
            <p class="register-a">没有账号,<a href="/register.html">立即注册</a></p>
        </form>
 

2.js

2.次e代表的是不同事件,无法互相操作。

$(".btn btn-lg").on('click')(function(e){

e.preventDefault();      //e表示当前点击事件

})

$(".form-login").submit(function(e){
        e.preventDefault();            //e 表示的是当前选中的表单的提交事件。阻止默认表单提交行为。
        mobile = $("#mobile").val();
        passwd = $("#password").val();
        if (!mobile) {
            $("#mobile-err span").html("请填写正确的手机号!");
            $("#mobile-err").show();
            return;
        }
        if (!passwd) {
            $("#password-err span").html("请填写密码!");
            $("#password-err").show();
            return;
        }
        var data = {};
        $(this).serializeArray().map(function(x){data[x.name] = x.value;});
        var jsonData = JSON.stringify(data);
        $.ajax({
            url:"/api/login",
            type:"POST",
            data: jsonData,
            contentType: "application/json",
            dataType: "json",
            headers:{
                "X-XSRFTOKEN":getCookie("_xsrf"),
            },
            success: function (data) {
                if ("0" == data.errno) {
                    location.href = "/";
                    return;
                }
                else {
                    $("#password-err span").html(data.errmsg);
                    $("#password-err").show();
                    return;
                }
            }
        });
    });

© 著作权归作者所有

共有 人打赏支持
hyhlinux
粉丝 7
博文 167
码字总数 51777
作品 0
海淀
程序员
私信 提问
高性能web开发 - 如何加载JS,JS应该放在什么位置?

外部JS的阻塞下载 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。 有人会问:为...

林文安
2012/05/16
0
0
Javascript 返回上一页 返回下一页

Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的U...

Fx_demon
2014/12/31
0
0
世界级javascript大师们的视频与PPT

阅读: 6 评论: 0 作者: 阿K&LiveCai 发表于 2010-03-26 10:45 原文链接 来源:css9.net 导读:本文中的javascript大师们大多来自yahoo公司,可能说起他们的名字国内熟悉的人并不多,不过说...

陈波
2010/03/30
0
0
C#代码与javaScript函数的相互调用

问: 1.如何在JavaScript访问C#函数? 2.如何在JavaScript访问C#变量? 3.如何在C#中访问JavaScript的已有变量? 4.如何在C#中访问JavaScript函数? 问题1答案如下: javaScript函数中执行C#代码...

孟宪迎
2009/12/27
0
0
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

小微
2012/04/06
0
5

没有更多内容

加载失败,请刷新页面

加载更多

聊聊我怎么系统学习Linux技能并快速提高的

聊聊我怎么系统学习Linux技能并快速提高的 随着电子信息科技时代的发展,学会使用计算机在我们的生活中成为了必不可少的一项技能。而作为计算机中的三大操作系统之一的Linux更是饱受计算机爱...

linuxCool
33分钟前
2
0
Android/Java 获取一个byte[]的真实编码,用于解决乱码问题

来源地址:https://blog.csdn.net/qq_31384551/article/details/81627840 一个byte数组,byte[] buf,是由一个字符串转换来的,如何判断字符串使用的是什么编码? Mozilla的一个组件提供了相应...

她叫我小渝
42分钟前
6
0
使用spring-retry实现重试机制

我们经常会遇到一些场景,需要重试当前的操作,比如:文件上传失败,重新上传;微信accesstoken获取失败,重新获取等等的场景问题。那么今天就说一种可以实现此种机制的工具包:spring-retr...

哥本哈根的小哥
45分钟前
0
0
kubernetes notes

Error from server (ServerTimeout): error when creating "mysql.yaml": No API token found for service account "default", retry after the token is automatically created and added t......

kut
今天
2
0
代理模式---静态代理

package com.atguigu.java; //接口的应用:代理模式---静态代理。 public class ProxyTest { public static void main(String[] args) { NetWork work = new RealServer(); ProxyServer pro......

architect刘源源
今天
2
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部