<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
表單驗證<
/title>
<
/head>
"" method=
"get"
>
使用者名稱："text"
>
<
/span>
密 碼："password"
>
<
/span>
"submit"
>
<
/form>
/* 設定初始變數ids bool未定義.
ids為的是起到節流作用，防止input事件中長按會持續觸發導致效率低下
bool為的是通過條件判斷得到內容的正確與否
*/let ids;
let bool;
let form = document.
queryselector
("form");
// 找到頁面上的所有input標籤並將其轉換成陣列形式，以便後面可以使用陣列的方法
// 注意這裡將包含了最後提交按鈕的input標籤
// 我們只需要獲取輸入內容的input標籤，所以後面將通過pop方法把最後乙個input從陣列剔除
let list = array.
from
(document.
getelementsbytagname
("input"))
;// 刪除最後提交按鈕的input
list.
pop();
// 這裡通過設定空陣列，初始化向空陣列內新增false，表示開始
// input內狀態全部為false狀態
let arr =
;for
(let i=
0; i)// 分別給form新增input和submit繫結事件
// 通過冒泡機制實現input輸入事件，最後form進行偵聽所選擇的輸入框
form.
addeventlistener
("input"
, formhandler)
; form.
addeventlistener
("submit"
, formhandler)
;function
formhandler
(e)else
// 最後將返回的bool的結果進行陣列內的替換
arr[index]
= bool;
// 為了進行切換,這裡需要再將bool值設定為false
// 這樣500毫秒之後觸發事件就又可以進行獲取了,不設定的話將執行一次之後不會
// 再進入語句塊了
ids =0;
},500,e);}
else
if(e.type ===
"submit"
&& arr.
indexof
(false
)===-1
)else
}function
judgetxt
(index,value)$/.
test
(value)
;case1:
return/^
(?=\d+\d)(?
=.*[a-z])(
?=.*
[a-z
])[a-za-z0-
9]$/.
test
(value);}
}<
/script>
<
/body>
<
/html>
1.input事件的節流
2.正則的test方法應用
注意事項：
節流要在事件為input的時候進行，否則會出現無法阻止預設submit的問題。
表單驗證的實現方法
a.兩種驗證方式 1.在表單提交時進行驗證，sumbit時 2.在表單控制項失去焦點時進行驗證 表單驗證邏輯一般寫在表單提交之前，html5也新增了表單驗證形式，表單驗證可以使用正規表示式 b.表單驗證一些必需的驗證專案 1.使用者是否填寫表單中必填專案 2.使用者是否已經輸入合法的日期 3.使用者...
js 策略模式 實現表單驗證
簡單點說就是 實現目標的方式有很多種 你可以根據自己身情況選乙個方法來實現目標 所以至少有2個物件 乙個是策略類 乙個是環境類 上下文 然後自己就可以根據上下文選擇不同的策略來執行方案 策略模式的優點 1.策略模式利用組合 委託和多型等技術和思想，可以有效地避免多重條件選擇語句 2.策略模式提供了對...
最實用的js表單驗證方法
每次都要用到表單驗證的時候，就在到處找東西，而網上的很多都不見的好用。自己終於累計了這些方法，在自己的程式中使用了的一些方法，肯定是好用的，主要使用了簡單的正規表示式進行判斷。如果有bug，歡迎提出來。下面驗證的是長度 function checktextlen textid for var i 0...