文档章节

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
粉丝 8
博文 167
码字总数 51777
作品 0
海淀
程序员
私信 提问
JavaScript 开发者必备的7个资源

JavaScript 最近几年已经由一个二流选手变成使用最广的函数式编程语言。越来越多的资源投入到这个语言的开发中。 我最近做了很多JS开发,有前台的,也有在后台使用 Node.js 的。我想在这里分...

虫虫
2012/03/17
8.2K
5
javascript学习资料分享

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

小微
2012/04/06
0
5
Javascript在网页页面加载时的执行顺序

原文:http://blog.csdn.net/kylinbl/article/details/6160587 操作HTML DOM文档的一个难题是,你的JavaScript代码可能在DOM完全载入之前运行,这会导致你的代码产生一些问题。页面加载时浏览...

樂天
2015/11/20
0
0
使用Kotlin:让Android与JS交互的详解

先来说说什么是JS交互: 说的俗一点就是通过我们项目中的控件来调用HTML里的JS代码,也可以通过JS来调用项目中的代码。 Android与JS之间的桥梁就是WebView了,我们是通过WebView来实现他们的...

富江___
2018/06/11
0
0
分享51本关于JavaScript方面的学习书籍(免费下载)

分享51本关于JavaScript方面的学习书籍(免费下载) 1、JavaScript面向对象15分钟教程 2、原型、作用域、闭包的完整解释 3、Javascript面向对象特性实现(封装、继承、接口) 4、JavaScript面向...

邓剑彬
2012/12/02
1K
12

没有更多内容

加载失败,请刷新页面

加载更多

IntelliJ IDEA创建第一个Spring boot项目

下载maven:http://maven.apache.org/download.cgi 开发工具:IntelliJ IDEA JDK: Java JDK1.8 ## 1.为了第一个项目初始化速度加快,我们先来配置maven: 添加配置: 选择Build,Execution,Dep...

凌宇之蓝
45分钟前
2
0
Coding and Paper Letter(四十五)

资源整理。 1 Coding: 1.Python库gempy,一种基于Python的开源三维结构地质建模软件,它允许从界面和方向数据隐式(即自动)创建复杂的地质模型。 它还支持随机建模以解决参数和模型的不确定...

胖胖雕
今天
6
0
golang 声明一个指定长度的数组,用于后续添加

很多时候我们需要声明一个指定长度的数组,用于后续添加.在使用go的时候要注意,下面的第一个例子会有报错 "non-constant array bound",应该使用第二个例子. Length 是动态的值 有报错的例子 ...

漫步海边小路
今天
0
0
Java NIO示例

Server端 /** * 《构建高性能的大型分布式Java应用》 * 书中的示例代码 * 版权所有 2008---2009 */package book.chapter1.tcpnio;import java.net.InetSocketAddress;i...

月下狼
今天
1
0
发布xxl-job executor dotnet core 执行器的实现

DotXxlJob [github][https://github.com/xuanye/DotXxlJob] xxl-job的dotnet core 执行器实现,支持XXL-JOB 2.0+ 1 XXL-JOB概述 [XXL-JOB][1]是一个轻量级分布式任务调度平台,其核心设计目标...

假正经哥哥
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部