簡介

JavaScript 是一門跨平臺、面向?qū)ο蟮哪_本語言==，而Java語言也是跨平臺的、面向?qū)ο蟮恼Z言，只不過Java是編譯語言，是需要編譯成字節(jié)碼文件才能運(yùn)行的；JavaScript是腳本語言，不需要編譯，由瀏覽器直接解析并執(zhí)行。
JavaScript 是用來控制網(wǎng)頁行為的，它能使網(wǎng)頁可交互；那么它可以做什么呢？如改變頁面內(nèi)容、修改指定元素的屬性值、對表單進(jìn)行校驗等，下面是這些功能的效果展示：

改變頁面內(nèi)容

image.png
修改指定元素的屬性值

image.png

當(dāng)我們點擊上圖的開燈按鈕，效果就是上面右圖效果；當(dāng)我點擊關(guān)燈按鈕，效果就是上面左圖效果。其他這個功能中有倆張燈泡的圖片（使用img標(biāo)簽進(jìn)行展示），通過修改img標(biāo)簽的src屬性值改變展示的圖片來實現(xiàn)
對表單進(jìn)行校驗

image.png

在上面左圖的輸入框輸入用戶名，如果輸入的用戶名是不滿足規(guī)則的就展示右圖(上) 的效果；如果輸入的用戶名是滿足規(guī)則的就展示右圖(下) 的效果。

JavaScript 和 Java 是完全不同的語言，不論是概念還是設(shè)計，只是名字比較像而已。但是基礎(chǔ)語法類似，所以我們有java的學(xué)習(xí)經(jīng)驗，再學(xué)習(xí)JavaScript 語言就相對比較容易些。

JavaScript（簡稱：JS）在 1995 年由 Brendan Eich 發(fā)明，并于 1997 年成為一部 ECMA 標(biāo)準(zhǔn)。ECMA 規(guī)定了一套標(biāo)準(zhǔn) 就叫 ECMAScript ，所有的客戶端校驗語言必須遵守這個標(biāo)準(zhǔn)，當(dāng)然 JavaScript 也遵守了這個標(biāo)準(zhǔn)。ECMAScript 6 (簡稱ES6) 是最新的 JavaScript 版本（發(fā)布于 2015 年)，我們的課程就是基于最新的 ES6 進(jìn)行講解。

JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的結(jié)合方式。JavaScript引入方式有兩種：

內(nèi)部腳本：將 JS代碼定義在HTML頁面中
外部腳本：將 JS代碼定義在外部 JS文件中，然后引入到 HTML頁面中
內(nèi)部引入
alert時JavaScript的一個方法，作用是將參數(shù)數(shù)據(jù)以瀏覽器彈框的形式輸出出來
而且可以在HTML文檔中任意地方，放置任意數(shù)量的<script>標(biāo)簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    alert("hello js1");
//在這里寫js代碼
</script>
</body>
</html>

外部引入
目錄結(jié)構(gòu)

image.png

注意：

外部腳本不能包含 <script> 標(biāo)簽

在js文件中直接寫 js 代碼即可，不要在 js文件中寫 script 標(biāo)簽

<script> 標(biāo)簽不能自閉合

在頁面中引入外部js文件時，不能寫成 <script src="../js/demo.js" />。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="../js/demo.js"></script>
</body>
</html>

JavaScript基礎(chǔ)語法

書寫語法

區(qū)分大小寫：與Java一樣，變量名、函數(shù)名以及其他一切東西都是區(qū)分大小寫的
每行結(jié)尾的分號可有可無
如果一行上寫多個語句時，必須加分號用來區(qū)分多個語句。
注釋
1、單行注釋：//注釋內(nèi)容
2、多行注釋：/* 注釋內(nèi)容 */
3、不過JavaScript沒有文檔注釋
大括號表示代碼塊這里與Java一樣

輸出語句

window.alert()彈出警告框

<script>
    window.alert("hello js");//寫入警告框
</script>

document.write()寫入HTML輸出

<script>
    document.write("hello js 2~");//寫入html頁面
</script>

consile.log()輸出到控制臺

<script>
    console.log("hello js 3");//寫入瀏覽器的控制臺
</script>

控制臺在瀏覽器中按12

image.png

變量

JavaScript中用關(guān)鍵字var來聲明變量,并且它是弱類型的語言，變量可以存放各種類型的值

var  test = 20;
test = "張三"

js 中的變量名命名也有如下規(guī)則，和java語言基本都相同

組成字符可以是任何字母、數(shù)字、下劃線（_）或美元符號（$）
數(shù)字不能開頭
建議使用駝峰命名
var定義的變量是全局變量，可以重復(fù)定義

//全局變量
{
    var age = 20;
}
alert(age);  // 在代碼塊中定義的age 變量，在代碼塊外邊還可以使用
//可重復(fù)定義
{
    var age = 20;
    var age = 30;//JavaScript 會用 30 將之前 age 變量的 20 替換掉
}
alert(age); //打印的結(jié)果是 30

ECMAScript 6 新增了 let關(guān)鍵字來定義變量，他的用法類似var，但是聲明的變量，只在let關(guān)鍵字所在的代碼塊有效，不允許重復(fù)聲明。還新增了const關(guān)鍵字，聲明只讀常量，值無法改變跟Java的final類似

數(shù)據(jù)類型

JavaScript 中提供了兩類數(shù)據(jù)類型：原始類型和引用類型。

使用 typeof 運(yùn)算符可以獲取數(shù)據(jù)類型

alert(typeof age); 以彈框的形式將 age 變量的數(shù)據(jù)類型輸出

原始數(shù)據(jù)類型：

number：數(shù)字（整數(shù)、小數(shù)、NaN(Not a Number)）
```
var age = 20;
var price = 99.8;

alert(typeof age); // 結(jié)果是 ： number
alert(typeof price);// 結(jié)果是 ： number
```
注意： NaN是一個特殊的number類型的值，后面用到再說

string：字符、字符串，單雙引皆可

var ch = 'a';
var name = '張三'; 
var addr = "北京";

alert(typeof ch); //結(jié)果是  string
alert(typeof name); //結(jié)果是  string
alert(typeof addr); //結(jié)果是  string

注意：在 js 中雙引號和單引號都表示字符串類型的數(shù)據(jù)

boolean：布爾。true，false

var flag = true;
var flag2 = false;

alert(typeof flag); //結(jié)果是 boolean
alert(typeof flag2); //結(jié)果是 boolean

null：對象為空
```
var obj = null;

alert(typeof obj);//結(jié)果是 object
```
為什么打印上面的 obj 變量的數(shù)據(jù)類型，結(jié)果是object；這個官方給出了解釋，下面是從官方文檔截的圖

image.png
undefined：當(dāng)聲明的變量未初始化時，該變量的默認(rèn)值是 undefined
```
var a ;
alert(typeof a); //結(jié)果是 undefined
```

運(yùn)算符

JavaScript 提供了如下的運(yùn)算符。大部分和 Java語言都是一樣的，不同的是 JS 關(guān)系運(yùn)算符中的 == 和 ===，一會我們只演示這兩個的區(qū)別，其他運(yùn)算符將不做演示

一元運(yùn)算符：++，--
算術(shù)運(yùn)算符：+，-，*，/，%
賦值運(yùn)算符：=，+=，-=…
關(guān)系運(yùn)算符：>，<，>=，<=，!=，==，===…
邏輯運(yùn)算符：&&，||，!
三元運(yùn)算符：條件表達(dá)式 ? true_value : false_value

== 和===區(qū)別

概述:

==：
1. 判斷類型是否一樣，如果不一樣，則進(jìn)行類型轉(zhuǎn)換
2. 再去比較其值
===：js 中的全等于
1. 判斷類型是否一樣，如果不一樣，直接返回false
2. 再去比較其值

代碼：

var age1 = 20;
var age2 = "20";

alert(age1 == age2);// true
alert(age1 === age2);// false

類型轉(zhuǎn)換

上述講解 == 運(yùn)算符時，發(fā)現(xiàn)會進(jìn)行類型轉(zhuǎn)換，所以接下來我們來詳細(xì)的講解一下 JavaScript 中的類型轉(zhuǎn)換。

其他類型轉(zhuǎn)為number
- string 轉(zhuǎn)換為 number 類型：按照字符串的字面值，轉(zhuǎn)為數(shù)字。如果字面值不是數(shù)字，則轉(zhuǎn)為NaN
  
  將 string 轉(zhuǎn)換為 number 有兩種方式：
  - 使用 + 正號運(yùn)算符：
```
var str = +"20";
alert(str + 1) //21
```
  - 使用 parseInt() 函數(shù)(方法)：
```
var str = "20";
alert(parseInt(str) + 1);
```
  ==建議使用 parseInt() 函數(shù)進(jìn)行轉(zhuǎn)換。==
- boolean 轉(zhuǎn)換為 number 類型：true 轉(zhuǎn)為1，false轉(zhuǎn)為0
```
var flag = +false;
alert(flag); // 0
```
其他類型轉(zhuǎn)為boolean
- number 類型轉(zhuǎn)換為 boolean 類型：0和NaN轉(zhuǎn)為false，其他的數(shù)字轉(zhuǎn)為true
- string 類型轉(zhuǎn)換為 boolean 類型：空字符串轉(zhuǎn)為false，其他的字符串轉(zhuǎn)為true
- null類型轉(zhuǎn)換為 boolean 類型是 false
- undefined 轉(zhuǎn)換為 boolean 類型是 false
代碼如下：
```
// var flag = 3;
// var flag = "";
var flag = undefined;

if(flag){
    alert("轉(zhuǎn)為true");
}else {
    alert("轉(zhuǎn)為false");
}
```

使用場景：

在 Java 中使用字符串前，一般都會先判斷字符串不是null，并且不是空字符才會做其他的一些操作，JavaScript也有類型的操作，代碼如下：

var str = "abc";

//健壯性判斷
if(str != null && str.length > 0){
    alert("轉(zhuǎn)為true");
}else {
    alert("轉(zhuǎn)為false");
}

但是由于 JavaScript 會自動進(jìn)行類型轉(zhuǎn)換，所以上述的判斷可以進(jìn)行簡化，代碼如下：

var str = "abc";

//健壯性判斷
if(str){
    alert("轉(zhuǎn)為true");
}else {
    alert("轉(zhuǎn)為false");
}

流程控制語句

JavaScript 中提供了和 Java 一樣的流程控制語句，如下

if
switch
for
while
dowhile

if 語句

var count = 3;
if (count == 3) {
    alert(count);
}

switch 語句

var num = 3;
switch (num) {
    case 1:
        alert("星期一");
        break;
    case 2:
        alert("星期二");
        break;
    case 3:
        alert("星期三");
        break;
    case 4:
        alert("星期四");
        break;
    case 5:
        alert("星期五");
        break;
    case 6:
        alert("星期六");
        break;
    case 7:
        alert("星期日");
        break;
    default:
        alert("輸入的星期有誤");
        break;
}

for 循環(huán)語句

var sum = 0;
for (let i = 1; i <= 100; i++) { //建議for循環(huán)小括號中定義的變量使用let
    sum += i;
}
alert(sum);

while 循環(huán)語句

var sum = 0;
var i = 1;
while (i <= 100) {
    sum += i;
    i++;
}
alert(sum);

dowhile 循環(huán)語句

var sum = 0;
var i = 1;
do {
    sum += i;
    i++;
}
while (i <= 100);
alert(sum);

函數(shù)

函數(shù)（就是Java中的方法）是被設(shè)計為執(zhí)行特定任務(wù)的代碼塊；JavaScript 函數(shù)通過 function 關(guān)鍵詞進(jìn)行定義。

定義格式

函數(shù)定義格式有兩種：

方式1

function 函數(shù)名(參數(shù)1,參數(shù)2..){
    要執(zhí)行的代碼
}

方式2

var 函數(shù)名 = function (參數(shù)列表){
    要執(zhí)行的代碼
}

==注意：==

形式參數(shù)不需要類型。因為JavaScript是弱類型語言
function add(a, b){
   return a + b;
}
上述函數(shù)的參數(shù) a 和 b 不需要定義數(shù)據(jù)類型，因為在每個參數(shù)前加上 var 也沒有任何意義。

返回值也不需要定義類型，可以在函數(shù)內(nèi)部直接使用return返回即可

函數(shù)調(diào)用

函數(shù)調(diào)用函數(shù)：

函數(shù)名稱(實際參數(shù)列表);

eg：

let result = add(10,20);

==注意：==

JS中，函數(shù)調(diào)用可以傳遞任意個數(shù)參數(shù)

例如 let result = add(1,2,3);

它是將數(shù)據(jù) 1 傳遞給了變量a，將數(shù)據(jù) 2 傳遞給了變量 b，而數(shù)據(jù) 3 沒有變量接收。

基本對象

Array對象

數(shù)組的定義格式有兩種：

方式1

var 變量名 = new Array(元素列表);

例如：

var arr = new Array(1,2,3); //1,2,3 是存儲在數(shù)組中的數(shù)據(jù)（元素）

方式2
```
var 變量名 = [元素列表];
```
例如：
```
var arr = [1,2,3]; //1,2,3 是存儲在數(shù)組中的數(shù)據(jù)（元素）
```
注意：Java中的數(shù)組靜態(tài)初始化使用的是{}定義，而 JavaScript 中使用的是 [] 定義。

訪問方式也是與Java一樣 arr[索引] = 值；

特點

JavaScript 中的數(shù)組相當(dāng)于 Java 中集合。數(shù)組的長度是可以變化的，而 JavaScript 是弱類型，所以可以存儲任意的類型的數(shù)據(jù)。

屬性掌握length屬性數(shù)組的長度，方法掌握下面?zhèn)z種

push 函數(shù)：給數(shù)組添加元素，也就是在數(shù)組的末尾添加元素

參數(shù)表示要添加的元素
```
// push:添加方法
var arr5 = [1,2,3];
arr5.push(10);
alert(arr5);  //數(shù)組的元素是 {1,2,3,10}
```
splice 函數(shù)：刪除元素

參數(shù)1：索引。表示從哪個索引位置刪除

參數(shù)2：個數(shù)。表示刪除幾個元素
```
// splice:刪除元素
var arr5 = [1,2,3];
arr5.splice(0,1); //從 0 索引位置開始刪除，刪除一個元素 
alert(arr5); // {2,3}
```

String對象

創(chuàng)建的方式有倆種

方式1：
```
var 變量名 = new String(s); 
```
方式2：
```
var 變量名 = "數(shù)組"; 
```

屬性：length 字符串的長度

方法：charAt() 返回在指定位置的字符 indexOf() 檢索字符串

trim() 去掉字符串倆邊的空格

自定義對象

格式：

var 對象名稱 = {
    屬性名稱1:屬性值1,
    屬性名稱2:屬性值2,
    ...,
    函數(shù)名稱:function (形參列表){},
    ...
};

調(diào)用屬性的格式：

對象名.屬性名

調(diào)用函數(shù)的格式：

對象名.函數(shù)名()

接下來通過代碼演示一下，讓大家體驗一下 JavaScript 中自定義對象

var person = {
        name : "zhangsan",
        age : 23,
        eat: function (){
            alert("干飯~");
        }
    };


alert(person.name);  //zhangsan
alert(person.age); //23

person.eat();  //干飯~

BOM對象

BOM:Browser Object Model：瀏覽器對象模型。也就是JavaScript將瀏覽器的各個組成部分封裝為對象

BOM 中包含了如下對象：

Window：瀏覽器窗口對象
Navigator：瀏覽器對象
Screen：屏幕對象
History：歷史記錄對象
Location：地址欄對象

重點掌握window、History、location對象

window對象

window對象是JavaScript對瀏覽器的窗口進(jìn)行封裝的對象，并且不需要創(chuàng)建可以直接使用，并可以省略，直接使用他自己的屬性

window對象屬性

window` 對象提供了用于獲取其他 BOM 組成對象的屬性

image.png

也就是說，我們想使用 Location 對象的話，就可以使用 window 對象獲??；寫成 window.location，而 window. 可以省略，簡化寫成 location 來獲取 Location 對象。

window對象函數(shù)

alert(“彈出來顯示的語句”)；

confim("彈出來顯示的語句");

setTimeout(函數(shù),毫秒值)；

setInterval(函數(shù)，毫秒值)；

 window.alert("警告框");
   if(window.confirm("你確定刪除？")){
       //點擊確定  返回true 取消返回false
       Document.write("true 確定刪除")
   }
   //定時器 只執(zhí)行一次
   window.setTimeout(function (){alert("只執(zhí)行一次")},1000);

   //定時器 無限定時器
   window.setInterval(function (){
       Document.write("每三秒執(zhí)行一次，寫的是毫秒值")
   },3000)
   //第二種
   function  aa(){
       alert("輸出了bb")
   }
   window.setInterval(aa,3000);
    //第三種
   function  bb(){
       alert("輸出了bb")
   }
 window.setInterval("bb()",1000);

無限定時器會返回一個id；

調(diào)用clearInterval(id); 結(jié)束定時器

//window 都可以省略 提供的公共方法，所以全局可用
let count = 0; 
let id =  window.setInterval(function (){
       Document.write("每三秒執(zhí)行一次，寫的是毫秒值");
    count++;
    if(count == 10){
        window.clearInterval(id);
    }
   },1000);

History對象：歷史記錄

獲取對象：window.history

方法1：back() 加載history列表中華的前一個URL

方法2：forward() 加載history列表中華的下一個URL

Location對象

location.href="url";//跳轉(zhuǎn)到某頁面
3秒后跳轉(zhuǎn)到某頁
Document.write("三秒后跳轉(zhuǎn)到百度");
setTimeout(function(){
    locaktion.;
},3000);
//也可以使用無限定時器，頁面消失定時器就會失效
document.write("三秒后跳轉(zhuǎn)到百度");
setInterval(function(){
    locaktion.;
},3000);

DOM對象

DOM：Document Object Model 文檔對象模型。也就是 JavaScript 將 HTML 文檔的各個組成部分封裝為對象。

DOM是W3C（萬維網(wǎng)聯(lián)盟）的標(biāo)準(zhǔn)
DOM定義了訪問HTML和XML文檔的標(biāo)準(zhǔn)
W3C DOM 標(biāo)準(zhǔn)被分為3個不同的部分
- 核心DOM：針對任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
  - Document：整個文檔對象
  - Element：元素對象
  - Attribute：屬性對象
  - Text：文本對象
  - Comment：注釋對象
- XML DOM ：針對XML文檔的標(biāo)準(zhǔn)模型
- HTML DOM：針對HTML文檔標(biāo)準(zhǔn)模型
  - Image：<img>
  - Buttom：<input type="button">

主要作用就是獲取對象對THML進(jìn)行操作

獲取Element對象

document.querySelector() ：獲取單個對象

doucment.querySelectorAll()：獲取多個，返回數(shù)組

里面?zhèn)髦?，傳?biāo)簽選擇器，類選擇器，id選擇器

//querySelector()  找單個，如果目標(biāo)多個，默認(rèn)返回第一個  傳值傳元素選擇器和類選擇器還有id選擇器
//querySelectorAll() 找多個，返回的是一個數(shù)組
let aa=  document.querySelector("div");
alert(aa);

let bb = document.querySelectorAll("div");
for(let i=0;i<bb.length;i++){
    let a =bb[i];
    document.write(a.innerHTML);
}
let cc = document.querySelectorAll(".a1");//id選擇器把.a1 換成#id即可
for(let i = 0;i<cc.length;i++){
    let c = cc[i];
    document.write(c.innerHTML);
}
//對元素的屬性進(jìn)行操作（樣式屬性，固有屬性）
//樣式屬性是加的樣式，固屬性是標(biāo)簽自帶的
//下面是html的設(shè)置
//<img src="a.jpg">
//<div>wwwwwwwwwwwwwwwwwwww </div>

    //操作樣式屬性 div 沒有固有屬性
   let div= document.querySelector("div");

//style:設(shè)置元素樣式
//innerHTML:設(shè)置元素內(nèi)容
   div.innerHTML = "我愛學(xué)習(xí)";
   div.style.color="red";
   //操作固有屬性
    let img = document.querySelector("img");
    img.src="s.png";
//操作標(biāo)簽內(nèi)容innerHTML（設(shè)置標(biāo)簽體用的，專門針對圍堵標(biāo)簽用的） 以及（表單項標(biāo)簽）value的東西
// input標(biāo)簽就是圍堵標(biāo)簽
//姓名：<input type="text" name="name" value>
   let input =  document.querySelector("input");
   input.value="林青霞";

事件監(jiān)聽和綁定

綁定事件的倆種方式

方式一

<input type="text" onclick="on()">
<script>
    function on(){
        alert("我被點了")
    }
</script>

方式二

<input type="text" >
<script>
    //獲取input元素
   let input =  document.querySelector("input");
   input.onclick = function(){
       alert("我被點了")
   }
</script>

常用事件使用

<!--失去焦點  onblur      鼠標(biāo)點擊別的地方即失去焦點
    獲得焦點  onfocus   鼠標(biāo)點擊到即獲得焦點
    點擊事件 onclick      鼠標(biāo)點一下
   表單提交事件 onsubmit   點擊標(biāo)點提交按鈕 -->
<form action="#" method="get">
    姓名：<input type="text" >
    <input type="submit">
</form>

<script>
    //獲取input元素
    let input =  document.querySelector("input");
    //失去焦點  onblur
    input.onblur = function (){console.log("失去焦點")};
    //獲得焦點  onfocus
    input.onfocus = function(){console.log("獲得焦點")};
    //點擊事件 onclick
    //表單提交事件 onsubmit
    let form = document.querySelector("form");
    from.onsubmit = function(){

       return false;
    }
</script>

表單檢驗

當(dāng)用戶注冊的時候，所有的信息符合相應(yīng)規(guī)則才能提交成功，否則不允許提交表單，所以對其輸入的進(jìn)行校驗。

正則表達(dá)式

從上面創(chuàng)建正則對象的格式中可以看出不管哪種方式都需要正則表達(dá)式，那么什么是正則表達(dá)式呢？

正則表達(dá)式定義了字符串組成的規(guī)則。也就是判斷指定的字符串是否符合指定的規(guī)則，如果符合返回true，如果不符合返回false。

正則表達(dá)式是和語言無關(guān)的。很多語言都支持正則表達(dá)式，Java語言也支持，只不過正則表達(dá)式在不同的語言中的使用方式不同，js 中需要使用正則對象來使用正則表達(dá)式。

正則表達(dá)式常用的規(guī)則如下：

^：表示開始
$：表示結(jié)束
[ ]：代表某個范圍內(nèi)的單個字符，比如： [0-9] 單個數(shù)字字符
.：代表任意單個字符，除了換行和行結(jié)束符
\w：代表單詞字符：字母、數(shù)字、下劃線()，相當(dāng)于 [A-Za-z0-9]
\d：代表數(shù)字字符：相當(dāng)于 [0-9]

量詞：

+：至少一個
*：零個或多個
？：零個或一個
{x}：x個
{m,}：至少m個
{m,n}：至少m個，最多n個

正則對象

RegExp是正則對象。判斷制定和字符串是否符合規(guī)則

代碼演示：

// 規(guī)則：單詞字符，6~12
//1,創(chuàng)建正則對象，對正則表達(dá)式進(jìn)行封裝
var reg = /^\w{6,12}$/;

var str = "abcccc";
//2,判斷 str 字符串是否符合 reg 封裝的正則表達(dá)式的規(guī)則
var flag = reg.test(str);
alert(flag);

函數(shù)

test(str) ：判斷指定字符串是否符合規(guī)則，返回 true或 false

表單驗證案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歡迎注冊</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>歡迎注冊</h1>
        <span>已有帳號？</span> <a href="#">登錄</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用戶名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用戶名不太受歡迎</span>
                </td>

            </tr>

            <tr>
                <td>密碼</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密碼格式有誤</span>
                </td>
            </tr>


            <tr>
                <td>手機(jī)號</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手機(jī)號格式有誤</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 冊" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>


<script>

    //1. 驗證用戶名是否符合規(guī)則
    //1.1 獲取用戶名的輸入框
    var usernameInput = document.getElementById("username");

    //1.2 綁定onblur事件 失去焦點
    usernameInput.onblur = checkUsername;

    function checkUsername() {
        //1.3 獲取用戶輸入的用戶名
        var username = usernameInput.value.trim();

        //1.4 判斷用戶名是否符合規(guī)則：長度 6~12,單詞字符組成
        var reg = /^\w{6,12}$/;
        var flag = reg.test(username);

        //var flag = username.length >= 6 && username.length <= 12;
        if (flag) {
            //符合規(guī)則
            document.getElementById("username_err").style.display = 'none';
        } else {
            //不合符規(guī)則
            document.getElementById("username_err").style.display = '';
        }
        return flag;
    }

    //1. 驗證密碼是否符合規(guī)則
    //1.1 獲取密碼的輸入框
    var passwordInput = document.getElementById("password");

    //1.2 綁定onblur事件 失去焦點
    passwordInput.onblur = checkPassword;

    function checkPassword() {
        //1.3 獲取用戶輸入的密碼
        var password = passwordInput.value.trim();

        //1.4 判斷密碼是否符合規(guī)則：長度 6~12
        var reg = /^\w{6,12}$/;
        var flag = reg.test(password);

        //var flag = password.length >= 6 && password.length <= 12;
        if (flag) {
            //符合規(guī)則
            document.getElementById("password_err").style.display = 'none';
        } else {
            //不合符規(guī)則
            document.getElementById("password_err").style.display = '';
        }
        return flag;
    }

    //1. 驗證手機(jī)號是否符合規(guī)則
    //1.1 獲取手機(jī)號的輸入框
    var telInput = document.getElementById("tel");

    //1.2 綁定onblur事件 失去焦點
    telInput.onblur = checkTel;

    function checkTel() {
        //1.3 獲取用戶輸入的手機(jī)號
        var tel = telInput.value.trim();

        //1.4 判斷手機(jī)號是否符合規(guī)則：長度 11，數(shù)字組成，第一位是1
        //var flag = tel.length == 11;
        var reg = /^[1]\d{10}$/;
        var flag = reg.test(tel);
        if (flag) {
            //符合規(guī)則
            document.getElementById("tel_err").style.display = 'none';
        } else {
            //不合符規(guī)則
            document.getElementById("tel_err").style.display = '';
        
        return flag;
    }

    //1. 獲取表單對象
    var regForm = document.getElementById("reg-form");

    //2. 綁定onsubmit 事件
    regForm.onsubmit = function () {
        //挨個判斷每一個表單項是否都符合要求，如果有一個不合符，則返回false

        var flag = checkUsername() && checkPassword() && checkTel();

        return flag;
    }
</script>
</body>
</html>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

JavaScript

簡介

JavaScript引入方式

JavaScript基礎(chǔ)語法

書寫語法

輸出語句

變量

數(shù)據(jù)類型

運(yùn)算符

== 和===區(qū)別

類型轉(zhuǎn)換

流程控制語句

if 語句

switch 語句

for 循環(huán)語句

while 循環(huán)語句

dowhile 循環(huán)語句

函數(shù)

定義格式

函數(shù)調(diào)用

基本對象

Array對象

String對象

自定義對象

BOM對象

window對象

window對象屬性

window對象函數(shù)

History對象：歷史記錄

Location對象

DOM對象

獲取Element對象

事件監(jiān)聽和綁定

表單檢驗

正則表達(dá)式

正則對象

函數(shù)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av