石建文

Show you the code


  • 首页

  • 分类

  • 标签

  • 归档

  • 关于

使用 HTML5 原生表单验证来控制 Ajax 请求的发送

发表于 2015-09-22 | 分类于 JavaScript

    HTML5 原生的表单验证默认是针对 form 表单的请求行为的,但是有时候我们在发送 ajax 请求时也需要用到原生表单的验证功能,具体例子如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form onsubmit="return false;" id="myform"> //绑定 onsubmit 事件阻止原生表单请求
用户名:<input name="username" type="text" required maxlength="10" />
密码: <input name="password" type="password" />
<input type="submit" value="提交" id="submit_btn" />
</form>

<script>
var myform = document.getElementById('myform'),
btn = document.getElementById('submit_btn');
var isValid; //定义一个全局变量存储表单是否正确

myform.addEventListener('invalid', function() { //注册 invalid 事件,表单验证不通过时触发
isValid = false;
}, true);

var sendRequest = function() { //将 ajax 请求写成一个函数,并在里面判断表单验证是否通过,通过则发送请求
if(isValid) {
/*
ajax 请求代码
*/
}
};

btn.addEventListener('click', function() {
isValid = true; //默认表单是正确的
setTimeout(sendRequest, 0);
/*这里是一个重点,必须使用一个 setTimeout 来调用请求函数,这是因为 DOM 事件,Ajax,SetTimeout 都是异步执行,上面注册的 invalid 事件里面,它的回调函数的执行是异步的,所以如果这里不使用 setTimeout 将请求发送函数放入回调队列里面,就会由于变量 isValid 的值默认是 true 而使得表单验证一直都是通过的状态*/
}, false);

</script>

JavaScript学习笔记之深入理解闭包

发表于 2015-09-12 | 分类于 JavaScript

变量的作用域
作用域分为全局作用域和局部作用域,因为 JS 里没有块级作用域的概念,所以所谓的局部作用域是指函数内部的作用域,因为 JS 里函数外部是无法访问到函数内部的变量的,而函数内部却可以访问函数外部的变量,由此形成了局部作用域。

这里要注意一点,声明变量的时候一定要带上 var 关键字,如果没有 var 关键字则默认声明一个全局变量

1
2
3
4
5
6
7
8
9
10
var n = 1;
function func1(){
console.log(n);
}
func1();//输出1

function func2(){
var n = 1;
}
console.log(n); //undefined

阅读全文 »

JavaScript学习笔记之 this 关键字

发表于 2015-07-18 | 分类于 JavaScript

this 是 JavaScript 的一个关键字,它表示函数在运行的时候所处的执行环境,this 的值会随着执行环境的不同动态变化,总的来说,this 指的是当前调用函数的那个对象。我们常在一下几种情况下使用 this:

纯函数调用

在纯函数调用的情况下,this 指向全局环境:

1
2
3
4
5
6
var a = 1; //定义全局变量
function getA() {
var a = 2; //这里是一个局部变量
console.log(this.a);
}
getA(); //输出 1

阅读全文 »

DOM & BOM

发表于 2015-07-16 | 分类于 JavaScript

BOM

BOM 即是浏览器对象模型(Browser Object Model),它定义了 JavaScript 可以进行操作的浏览器的各个功能部件的接口,提供访问文档各个功能部件(如窗口本身、屏幕功能部件、浏览历史记录等)的途径以及操作方法。遗憾的是,BOM只是JavaScript脚本实现的一部分,没有任何相关的标准,每种浏览器都有自己的 BOM 实现,这是 BOM 最大的缺陷,在浏览器 JavaScript 中,BOM 主要有以下几个功能:

◆关闭、移动浏览器及调整浏览器窗口大小;
◆弹出新的浏览器窗口;
◆提供浏览器详细信息的定位对象;
◆提供载入到浏览器窗口的文档详细信息的定位对象;
◆提供用户屏幕分辨率详细信息的屏幕对象;
◆提供对cookie的支持;
◆加入ActiveXObject类扩展BOM,通过JavaScript实例化ActiveX对象。

阅读全文 »

Git简易教程

发表于 2015-07-13 | 分类于 Git

命令

初始化仓库

1
git init

查看仓库状态

1
git status

查看修改信息

1
git diff

版本回退

1
git reset --hard HEAD^

查看提交历史

1
git log

查看命令历史

1
git reflog

阅读全文 »

JavaScript学习笔记之深入理解继承

发表于 2015-05-02 | 分类于 JavaScript

  之前说到了创建对象的几种方法,所以决定在这里讲讲对象继承的几种方法,两者有所共通,如果这里的文章有何不解可以参考前一篇文章 JavaScript 学习笔记之创建对象的几种方法。

1.原型链继承

  原型链
  在讲继承之前先来说一下关于原型链的事情,JavaScript 是依靠原型链来实现继承的,之前讲过构造函数,原型与实例之间的关系:每一个构造函数都会有一个自己的原型对象比如 Object.prototype,构造函数用一个内部属性 [[prototype]] 指向该原型对象;原型对象包含一个指向构造函数的指针 constructor;而每一个实例也都有一个指向原型对象的内部指针 proto。假设当前构造函数 A 的原型对象 A.prototype 等于另一个构造函数 B 的实例的话,那么此时 A.prototype 内部将会有一个指向构造函数 B 的原型对象 B.prototype 的指针,B.prototype 里也会有指向构造函数 B 的指针(因为刚才说了每一个实例都会有一个指向原型对象的内部指针 proto,所以如果我当前这个原型对象 A.prototype 是另一个构造函数 B 的实例的话它就有了双重身份了,也就是说这个原型对象 A.prototype 它现在既是一个原型对象也是一个实例,既然是构造函数 B 的实例,就一定会有一个指向 B.prototype 的指针,相应地,在 B.prototype 里面也会包含着一个指向构造函数 B 的指针)。同样的,如果此时 B.prototype 又是另外一个原型的实例的话,上述关系也依然成立,这样一直延续下去,就构成了一条原型链。用图表示出来就是这样:

阅读全文 »

JavaScript学习笔记之浅析几种创建对象的方法

发表于 2015-04-11 | 分类于 JavaScript

  在 JavaScript 中,创建对象有几种方法,我们平时最常用的是用 Object 构造函数和对象字面量:

1
2
3
4
5
6
7
8
9
10
// Object 构造函数方法
var person = new Object();
person.name = "Sibarone";
person.age = "19";

//对象字面量方法
var person = {
name: "Sibarone",
age: 19;
};

阅读全文 »

JavaScript学习笔记之深入理解执行环境与作用域链

发表于 2015-04-06 | 分类于 JavaScript

执行环境和作用域链

  执行环境和作用域链是 JavaScript 里最重要的一个概念,在讲它们之前,先简单解释一下两个名词:‘变量对象’和‘活动对象’。

  变量对象
  变量对象是当代码执行流进入作用域时创建的一个包含该作用域内所有变量和函数声明的对象(注意:函数表达式不在此列)。
  活动对象
  活动对象是函数执行时创建的一个对象,这个对象包含函数的形参以及所有局部变量,它跟上面的变量对象正好是相对关系。

阅读全文 »

JavaScript学习笔记之数组的深拷贝

发表于 2015-04-02 | 分类于 JavaScript

  由于JavaScript的数据分为‘原始类型’和‘引用类型’,数组Array是引用类型,与c语言类似,对数组直接用‘=’号赋值的话,赋给变量的值只是该数组的引用地址(c语言中叫指针),并没有实现数组数据的拷贝,两个数组共享同一组数据,也就是说一旦修改这两个数组中的任何一方,该修改也会在另一方体现出来。具体代码如下:

阅读全文 »

Win7 64位硬盘安装Ubuntu14.10 64位无法进入安装界面解决方法

发表于 2015-01-25 | 分类于 Linux

  最近给系统升级,诸多问题陆续出现,首先Ubuntu14.10桌面版无法使用U盘启动,这里与问题无关暂且不表,但是也建议大家少用U盘安装。

阅读全文 »
1…34
Lowenshi

Lowenshi

40 日志
13 分类
7 标签
RSS
GitHub ZhiHu
© 2018 Lowenshi
由 Hexo 强力驱动
|
主题 — NexT.Pisces v5.1.2