這篇具有很好參考價值的文章主要介紹了【JavaScript】案例1：使用JS完成注冊頁面校驗。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。
??這里是【JavaScript】，關(guān)注我學習前端不迷路
??如果對你有幫助，給博主一個免費的點贊以示鼓勵
歡迎各位??點贊??評論收藏??
??專欄介紹
【JavaScript】 目前主要更新JavaScript，一起學習一起進步。
??本期介紹
本期主要介紹案例1：使用JS完成注冊頁面校驗
文章目錄
1.?需求說明
2.?知識講解-JavaScript（一）
2.1?JavaScript 概述
2.1.1?JavaScript 是什么？有什么作用？
2.1.2?JavaScript 入門案例
2.1.3?JavaScript 的語言特征及編程注意事項
2.1.4?JavaScript 的組成
2.1.4?JavaScript 的引入方式
2.2?JavaScript 基本語法
2.2.1?注釋
2.2.2?變量
2.2.3?運算符
2.3?JavaScript 函數(shù)/方法
2.3.1?函數(shù)簡述及作用
2.3.2?函數(shù)格式
2.3.3?函數(shù)使用的注意事項（和 Java 不同）
2.4?正則對象
2.4.1?RegExp 對象的創(chuàng)建方式
2.4.2?test 方法
2.4.3?常用正則（附錄）
2.5?JS 事件
2.5.1?JS 事件是什么？有什么作用？
2.5.2?onclick
2.5.3?onsubmit
3.?需求分析
4.?案例代碼實現(xiàn)
1.?需求說明
用戶在提交注冊表單時，需要對用戶的填寫的數(shù)據(jù)進行校驗。
本案例只對用戶名、密碼、確認密碼進行校驗。
其中用戶名、密碼、確認密碼不能為空；
密碼和確認密碼必須保持一致
2.?知識講解-JavaScript（一）
2.1?JavaScript 概述
2.1.1?JavaScript 是什么？有什么作用？
JavaScript
常用來為網(wǎng)頁添加各式各樣的動態(tài)功能。例如：點擊隱藏、點擊顯示。
HTML
：就是用來寫網(wǎng)頁的。
人的身體
CSS
： 就是用來美化頁面的。 人的衣服
JavaScript：前端大腦、靈魂。 人的大腦、靈魂
JavaScript
是
WEB
上強大的
腳本語言
。
腳本語言：
無法獨立執(zhí)行。必須嵌入到其他語言中，結(jié)合使用。
直接被瀏覽器解析執(zhí)行。?
Java
編程語言：
獨立寫程序，獨立運行。 編譯
---
執(zhí)行
作用：控制頁面特效展示。
例如：
JS
可以對
HTML
元素進行動態(tài)控制
JS
可以對表單項進行校驗
JS
可以控制
CSS
的樣式
2.1.2?JavaScript 入門案例
2.1.3?JavaScript 的語言特征及編程注意事項
特征：
JavaScript
無需編譯，直接被瀏覽器解釋并執(zhí)行
JavaScript
無法單獨運行，必須嵌入到
HTML
代碼中運行
JavaScript
的執(zhí)行過程由上到下依次執(zhí)行
注意：
JavaScript
沒有訪問系統(tǒng)文件的權(quán)限（安全）
由于 JavaScript
無需編譯，是由上到下依次解釋執(zhí)行，所以在保證可讀性的情況下，允許使用鏈
式編程
JavaScript
和
java
沒有任何直接關(guān)系
2.1.4?JavaScript 的組成
ECMAScript (核心)：規(guī)定了 JS 的語法和基本對象。
DOM
文檔對象模型：
處理網(wǎng)頁內(nèi)容
的方法和接口
標記型文檔。
HTML
BOM
瀏覽器對象模型：
與瀏覽器交互
的方法和接口
2.1.4?JavaScript 的引入方式
2.1.4.1?
內(nèi)部腳本
在當前頁面內(nèi)部寫
script
標簽，
script
內(nèi)部即可書寫
JavaScript
代碼
格式：
<script type=”text/javascript”>
JavaScript
的代碼
</script>
示例：
注：script 標簽理論上可以書寫在 HTML 文件的任意位置
2.1.4.2?外部引入
在
HTML
文檔中，通過
<script src=””>
標簽引入
.js
文件
格式：
<script type=”text/javascript”
src
=”javascript
文件路徑
” ></script>
示例
1
：
注：外部引用時
script
標簽內(nèi)不能有
script
代碼，即使寫了也不會執(zhí)行。
示例
2
：
?
2.2?JavaScript 基本語法
2.2.1?注釋
單行注釋
//
Hbuilder
快捷鍵
ctrl+/
多行注釋
/* */
Hbuilder
快捷鍵
ctrl+shift+/
示例：
2.2.2?變量
2.2.2.
1?
變量簡述
變量：標示內(nèi)存中的一塊空間，用于存儲數(shù)據(jù)，且數(shù)據(jù)是可變的。
變量的聲明：
var
變量名
;
//
變量賦予默認值，默認值為
undefined
（未定義的）
變量的聲明和賦值：
var
變量名
=
值
;
//
變量賦予對應的值
在聲明
JavaScript
變量時，需要遵循以下命名規(guī)范：
必須以字母或下劃線開頭，中間可以是數(shù)字、字符或下劃線
變量名不能包含空格等符號
不能使用
JavaScript
關(guān)鍵字作為變量名，如：
function
、
this
、
class
JavaScript
嚴格區(qū)分大小寫
。
?2.2.2.2?基本數(shù)據(jù)類型
類似于 java 中的基本數(shù)據(jù)類型。
JavaScript
區(qū)別于
java
，是弱類型語言，變量的使用不用嚴格遵循規(guī)范，所以一個變量聲明好之
后，是可以
賦予任意類型的值。
這在強類型語言 Java 中是無法想象的
通過 typeof 運算符可以分辨變量值屬于哪種基本數(shù)據(jù)類型?
ECMAScript 實現(xiàn)之初的一個 bug，null 屬于基本數(shù)據(jù)類型，typeof(null)--?object?
?2.2.2.3?引用數(shù)據(jù)類型
引用類型通常叫做類（
class
），但在
JavaScript
中，因為不存在編譯過程，所以沒有類的概念。
所以
JavaScript
的引用數(shù)據(jù)類型都是
對象
。
JavaScript
對象類型的默認值是
null.
標準創(chuàng)建方式：
var str = new String();//
和
java
相同
var str = new String; //js 獨有的方式
2.2.3?運算符
2.2.3.1?
比較運算符
==
邏輯等。僅僅對比 數(shù)據(jù)值。
===
全等
。 對比數(shù)據(jù)值并且對比類型。
如果值和類型都相同，則為
true
；值和類型有一個不同，則為
false
?
2.2.3.2?常見的 JS 運算符附錄?
注：
JavaScript
邏輯運算符沒有
& |
2.2.3.3?參考附錄-if 條件中的特殊格式（擴展-了解） ?
JavaScript
中的
if
和
Java
中的
if
用法一樣，都有表達式。
遇到特殊情況，請查閱下面兩個表格即可。（無需記憶）
2.3?JavaScript 函數(shù)/方法
2.3.1?函數(shù)簡述及作用
如果一段代碼需要被重復編寫使用，那么我們?yōu)榱朔奖憬y(tǒng)一編寫使用，可以將其封裝進一個函數(shù)
（方法）中。作用：增強代碼的復用性
2.3.2?函數(shù)格式
JavaScript
函數(shù)定義必須用小寫的
function
；
JavaScript
函數(shù)無需定義返回值類型，直接在
function
后面書寫 方法名；
參數(shù)的定義無需使用
var
關(guān)鍵字，否則報錯；
JavaScript
函數(shù)體中，
return
可以不寫，也可以
return
具體值，或者僅僅寫
return
；
JavaScript
函數(shù)調(diào)用執(zhí)行完畢必定有返回值，值及類型根據(jù)
return
決定：
如果未
return
具體值，返回值為
undefined
；
?
2.3.3?函數(shù)使用的注意事項（和 Java 不同）
JavaScript
函數(shù)若同名，則不存在方法重載，只有方法相互覆蓋，最后定義的函數(shù)覆蓋之前的定
義；
因為
JavaScript
不存在函數(shù)重載，所以
JavaScript
僅根據(jù)方法名來調(diào)用函數(shù)，即使實參與函數(shù)的
形參不匹配，也不會影響正常調(diào)用；
如果形參未賦值，就使用默認值 undefined
2.4?正則對象
2.4.1?RegExp 對象的創(chuàng)建方式
var reg = new RegExp("
表達式
");
（開發(fā)中基本不用）
var reg = /^
表達式
$/;
直接量（開發(fā)中常用）
直接量中存在邊界，即
^
代表開始，
$
代表結(jié)束
直接量方式的正則是對象，不是字符串，別用引號
2.4.2?test 方法
RegExp
方法
隨堂練習
2.4.3?常用正則（附錄）
2.5?JS 事件
2.5.1?JS 事件是什么？有什么作用？
通常鼠標或熱鍵的動作我們稱之為事件
(Event)
事件包括：點擊、表單提交、值發(fā)生改變、鼠標移入、鼠標移出等等
通過
JS
事件，我們可以完成頁面的指定特效。
2.5.2?onclick
點擊事件：由鼠標或熱鍵點擊元素組件時觸發(fā)
示例：
?效果：
2.5.3?onsubmit
表單提交事件：
表單的提交按鈕被點擊時
觸發(fā)
注意：該事件需要返回
boolean
類型的值來執(zhí)行 提交
/
阻止 表單數(shù)據(jù)的操作。
事件得到
true
，提交表單數(shù)據(jù)
事件得到
false
，阻止表單數(shù)據(jù)提交
示例
1
：
效果 1：
?
示例 2：
效果 2：
3.?需求分析
文章來源：http://www.zghlxwxcb.cn/news/detail-460451.html
提示：
1
、通過
document.getElementById()
獲取要操作的元素
2
、元素
.value
獲取元素的值
4.?案例代碼實現(xiàn)
文章來源地址http://www.zghlxwxcb.cn/news/detail-460451.html
到了這里，關(guān)于【JavaScript】案例1：使用JS完成注冊頁面校驗的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權(quán)，不承擔相關(guān)法律責任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！
