js03 案例驅動表單的驗證

2022-07-28 01:45:11 字數 2566 閱讀 9588

//////////////////////////////////////

案例2-表單校驗plus

需求:提示資訊不用彈出框,將資訊追加在文字框後面

技術分析:

確定事件 表單提交的時候onsubmit

onsubmit=" return checkform2()" 函式返回為true的時候才能 提交

文字框失去焦點的時候onblur

編寫函式

獲取元素

document.getelementbyid("id值");

操作元素(獲取元素的值,操作標籤體,操作標籤value屬性)

//給span填寫內容 文字框的內容

失去焦點的時候 將 文字框輸入的內容顯示在 span標籤裡

//的到span標籤 並且通過 innerhtml屬性設定 內容

document.getelementbyid("spanid").innerhtml=user.value;

/////////////////

步驟分析:

1.表單

2.表單提交的時候 確定事件 onsubmit()  = 「return  函式」

3.校驗使用者名稱和密碼

4.獲取使用者名稱和密碼的物件及值 byid

5.(當文字框失去焦點的時候才開始判斷 !) 判斷內容,當為空的時候,獲取響應的span元素? 操作span標籤體

相應到span元素

document.getelementbyid("spanid").innerhtml=user.value;

往span元素中顯示錯誤資訊

username_msgobj.innerhtml="使用者名稱不能為空";

innerhtml往標籤裡寫內容。 直接寫 html內容

////////////////////////

注意:事件函式 傳參 引數 為 this

在方法中(function())this指代的是當前的元素(當前dom物件)?

input標籤

例如:方法: 

function losefocus(obj)

/////////////////////////////

事件總結:

常見的事件:

焦點事件:★

onfocus

onblur

表單事件:★

onsubmit

onchange 改變

頁面載入事件:★

onload

滑鼠事件(掌握)

onclick

滑鼠事件(了解)

ondblclick:雙擊

onmousedown:按下

onmouserup:彈起

onmousemove:移動

onmouserover:懸停

onmouserout:移出

鍵盤事件(理解)

onkeydown:按下

onkeyup:彈起

onkeypress:按住

////////////

繫結事件:

js事件和函式的繫結:

方式1:

通過標籤的事件屬性

方式2:

給元素派發事件?先獲取元素,得到他執行的事件從上往下 解析找不到 id 的元素 還沒有載入,把script放在後邊可以執行

document.getelementbyid("id值").onclick=function(引數)

document.getelementbyid("id值").onclick=函式名//類似監聽 這個元素 是否被 點選了

注意:記憶體中應該存在該元素才可以派發事件

a.將方式2的js**放在html頁面的最下面

b.在頁面載入成功之後在執行方式2的js**使用onload事件.在頁面後元素載入成功後執行的方法

///////////////////

了解阻止預設事件的發生

阻止事件傳播

/////////////////

6 案例 人臉案例

1 得到影象的特徵後,訓練乙個決策樹構建的adaboost級聯決策器來識別是否為人臉 2 opencv中自帶已訓練好的檢測器,包括面部,眼睛,貓臉等,都儲存在xml檔案中,我們可以通過以下程式找到他們 主程式如下 import cv2 as cv import matplotlib.pyplot a...

10案例分析

銀行 信用風險,即客戶違約風險,是銀行風險管控的主要內容。不同行業,不同企業,財務指標的風險程度不同。假資料,假資訊,假報表的現象,財務資訊的質量問題有三個方面是非常重要的 1.建立識別假報表的管理體系 2.研究建立財務資訊的勾稽關係,即通過相互之間的購機關係的檢驗來判別資料的質量 3.建立資料的錄...

90 (案例)Lambda案例演示一

從匿名內部類到最簡化的lambda表示式逐漸演示 public inte ce demo02cookpublic class demo02 lambda方式 引數列表 一些重寫方法的 makecook lambda方式 繼續簡化 3 一些 如果 中的 只有一行,無論是否有返回值,都可以省略 retu...