表單驗證反饋:
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...