h5學習筆記之表單驗證反饋的幾個屬性

2021-09-26 13:12:38 字數 1548 閱讀 1197

表單驗證反饋:

invalid事件 validity物件(valid檢視驗證是否通過)

input.addeventlistener(『invalid』,fn,false)

阻止預設驗證:ev.preventdefault()

formnovalidate屬性 : 關閉驗證

otext.addeventlistener(「invalid」,fn1,false);

ev.preventdefault()

valuemissing : 輸入值為空時

typemismatch : 控制項值與預期型別不匹配

patter****match : 輸入值不滿足pattern正則

customerror 不符合自定義驗證

setcustomvalidity(); 自定義驗證

toolong : 超過maxlength最大限制

rangeunderflow : 驗證的range最小值

rangeoverflow:驗證的range最大值

stepmismatch: 驗證range 的當前值 是否符合min、max及step的規則

1、invalid事件 validity物件(valid檢視驗證是否通過) ,

input.addeventlistener(『invalid』,fn,false) ,

阻止預設驗證:ev.preventdefault()

valuemissing : 輸入值為空時

如: 下面**的意思就是表單設定了驗證,如果驗證失敗就會返回false

var txt = document.getelementbyid("txt");

txt.addeventlistener('invalid',fn,false); //這裡設定了乙個繫結事件,如果內容為空,上面的驗證就會失敗,就會執行fn這個函式

function fn()

2、typemismatch : 控制項值與預期型別不匹配,其實和上面一樣

如果填入的值input表單中的型別不一樣,那麼 this.validity.typemismatch 返回的值就是true

3、patter****match : 輸入值不滿足pattern正則

在input上設定 pattern 值 不滿足正則則 this.validity.patter****match 返回true

4、自定義驗證 customerror 不符合自定義驗證 失敗了返回true

setcustomvalidity(); 自定義驗證 這個屬性在火狐才有效果

如**

var txt = document.getelementbyid("txt");

var btn = document.getelementbyid("btn");

txt.addeventlistener('invalid',fn,false);

btn.onclick = function()else

} function fn(ev)

原生h5表單驗證

近來做專案時發現h5表單驗證挺不錯的,畢竟原生的用起來比較方便簡單,在此做個總結 1.現在我們來簡單的實現乙個h5表單驗證 tip 在使用pattern時需要input不能為空,所以必須要用上required,否則pattern不會起作用。2.當然如果你想使用h5的表單驗證就必須使用submit來提...

手寫表單及h5表單驗證舉例

表單是乙個很重要的概念,這裡涉及到收集資料以及驗證資料,以及表單的使用者體驗。一般ui框架會有封裝好的這些功能。這裡複習一下手寫表單,順帶複習一下表單的基本屬性,基本樣式和h5的表單驗證。一般包含 label optional input,錯誤提示。錯誤提示的形式各式各樣,有h5自帶的樣式,也可以自...

H5 表單驗證失敗的提示語

前端的童鞋在寫頁面時,都不可避免的總會踩到表單驗證這個坑.這時候,我們就要跪了,因為要寫一堆js來檢查.但是自從h5出現後,很多常見的表達驗證,它都已經幫我們實現了,讓我們減輕了很多負擔,就好像下面的 郵箱位址驗證 郵箱驗證是h5自身支援的,但是我們要驗證的場景和情況是多種多樣的,那該怎麼辦?用回j...