原生h5表單驗證

2021-08-03 06:31:06 字數 746 閱讀 5374

近來做專案時發現h5表單驗證挺不錯的,畢竟原生的用起來比較方便簡單,在此做個總結:

1.現在我們來簡單的實現乙個h5表單驗證:

tip:在使用pattern時需要input不能為空,所以必須要用上required,否則pattern不會起作用。

2.當然如果你想使用h5的表單驗證就必須使用submit來提交form哦,不然h5的表單驗證是不能起作用的,那麼如果我們想要在表單submit之前做一些邏輯判斷我們可以使用下面兩種方法:

當輸入使用者名稱和密碼為空的時候,需要判斷。這時候就用到了校驗使用者名稱和密碼,這個需要在jsp的前端頁面寫;有兩種方法,一種是用submit提交。一種是用button提交。

方法一:

在jsp的前端頁面的頭部插入乙個js方法:

function checkuser()

if(password == "" )else

}在form表單裡寫成這樣:

使用者名稱 

密  碼 

方法二:

function checkuser()

if(password == "" )

document.getelementbyid("formid").submit();

}form**的寫法,需要寫id

button按鈕的寫法如下:

3.我們需要了解input標籤的h5屬性(參考**:

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

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

H5表單屬性

form formaction formmethod placeholder autofocus list autocomplete list 指定文字框提供建議值的datalist元素,其值為datalist元素的id值。maxlength 設定文字框最大字元長度。pattern 用於輸入印證的正...

H5新增表單

新增表單型別如下 屬性值說明type email 限制使用者輸入必須為email型別 type url 限制使用者輸入必須為url型別 type date 限制使用者輸入必須為日期型別 type time 限制使用者輸入必須為時間型別 type month 限制使用者輸入必須為月型別 type we...