form表單使用小結

前後端交互的時候對於數據傳輸是必須的,form表單傳輸數據是經常使用的一種方式

下面總結一些最近遇到的問題

form表單外的按鈕怎麼提交form表單

在前端佈局的時候,我們有時候需要將提交按鈕放置在form表單外,這個時候怎麼去提交指定的表單呢? 話不多說,上代碼

表單外部的按鈕

表單提交的js

像這樣給表單外的按鈕綁定一個函數,使得它點擊時就會執行函數就可以了。

按鈕不在表單裏沒有指定submit卻還會提交某個表單

這是因爲按鈕的默認的type就是submit,如果出現了上述問題,只需要將不是提交按鈕的type屬性改成button即可

更改按鈕的type屬性

form表單前端想驗證完再提交

對於一個form表單,即使定義了按鈕點擊時觸發驗證表單內容的函數,但是在點擊提交按鈕的時候,還是會觸發表單提交。這個時候要知道表單的onsubmit屬性,這個屬性在表單提交事件發生時觸發,可以讓這個屬性的值爲一個函數,這樣就可以驗證表單了。說的簡單,怎麼驗證? 看代碼:

onsubmit
驗證表單
首先要注意到onsubmit後面的return,這個很重要,如果沒有的話,即使後面直接是一個false,也絲毫不會影響到表單的提交。想要它不提交就return一個false就可以啦,這樣就完成了一個簡單的表單驗證。

讓input不能輸入的操作

這裏的 input的不能輸入是指只讀屬性,但是可以通過其他方式來改變input的值。比如這樣:

只讀

雖然不能直接通過鍵盤來輸入,但是可以通過按鈕來進行操作

修改只讀的值

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章