天天看點

關于form表單onsubmi送出

表單允許用戶端的使用者以标準格式向伺服器送出資料。表單的建立者為了收集所需資料,使用了各種控件設計表單如 INPUT 或 SELECT。檢視表單的使用者隻需填充資料并單擊送出按鈕即可向伺服器發送資料。伺服器上的腳本會處理這些資料。

表單由三個重要屬性action,method,onsubmit。

action:規定當送出表單時,向何處發送表單資料。

method:規定如何發送表單資料。

onsubmit:當表單被送出時執行腳本。

頁面送出表單的資料是不可信任的,js腳本驗證作為輔助驗證,嘿嘿,防君子不防小人。背景需要對表單送出資料判斷。全部正确跳轉到成功頁,否則,跳轉到輔助性的提示頁(記錄這些非法操作的使用者)。

示例如下圖所示:

關于form表單onsubmi送出

主要講述表單送出關于onsubmit那些事

一般方法:使用onsubmit="return check()"對表單的值進行驗證。

對輸入的姓名,手機号,備注進行驗證。

示例如下圖所示(check圖一):

關于form表單onsubmi送出

                                              check圖一

也可以指定表單ID綁定onsubmit事件

示例如下圖所示(check圖二):

關于form表單onsubmi送出

                                              check圖二

這兩個主要差別:

一、綁定事件的方式不同。check圖二中藍色方框處是這兩種綁定事件的最大差別,當任一個判定條件不通過時阻止浏覽器預設行為。

二、check圖一中的“return false”和check圖二中的“return”也是亮點哈。

check圖一中的“return false”的作用是函數check()傳回布爾值false,傳給onsubmit中 return check(),阻止浏覽器送出。 

check圖二中的“return”的作用是當某個判斷條件不符合時,return傳回,不執行後面的。

關于js代碼簡單分析,如下:

表單源碼如下:

關于form表單onsubmi送出
關于form表單onsubmi送出

View Code