JS新增刪除一組文字框並對輸入資訊加以驗證

2021-09-06 23:22:44 字數 1461 閱讀 1180

在做專案中遇到這樣乙個問題,就是我們需要新增幾組資料到資料庫,但是具體幾組資料不確定,有客戶來填寫,比如我們需要新增打折策略,可能個策略有很多組方案,比如「滿100打5折,滿200打4折,滿500打3折」等等,這是作為一組方案來執行的,但是並不確定一組方案中有幾個子方案,所以,這裡我用js進行新增刪除子方案,並要對方案輸入的正確性加以判斷,並且通過json傳輸寫入資料庫,這裡我們主要寫如果新增刪除一組子專案和如果給每個文字框新增驗證。

動態新增一組文字框:

var counttable = 0;//

新增**行

addtable =function ()

注:

1.這裡的counttable應為全部變數,用於對每一行進行標識,這樣就確定每一行都是不同的,防止刪除一行後id重複的情況。

2.在這裡為每乙個text新增了焦點離去事件,即當焦點離開當前文字框時,我們需要對其嚴重是否符合輸入。

3.在文字框後加了label,作為驗證控制項,當我們輸入的文字不符合要求時,該label可見。

刪除任意一行:

//刪除當前行

deletetable =function (el)

}}

首先我們需要是或許要刪除行的位置,這裡就需要通過迴圈對比**中哪一行是當前點中行,然後進行刪除。

如何顯示和隱藏驗證控制項(當焦點離去文字時,對文字進行判斷):

//

驗證第一條資訊輸入是否合法

terifynumfirst =function (objtext)

//資訊必須為數字

if(isnan(terifytext))

objtext.parentnode.children[

1].style.display = "

none

";

}

當全部資訊需要寫入時,我們同樣需要進行判斷,如果有不合法的提示,否則生成datatable返回,具體如何往後臺傳輸,會在下篇部落格中寫道。

//

生成datatable物件

function generatedtb()

//判斷第二列資料是否為空,為空則顯示提示

if (secondgroup[i].value == ""

)

}for (var i = 0; i < veritify.length; i++)}//

alert(veritify.length);

//如何輸入資訊都合法,則整理當前資訊為陣列,返回該資訊進行處理。

if (flag == false

)

return

dtb;

}

這裡的驗證也相對比較簡單,只是驗證文字框輸入是否為空和是否為數字,用乙個label的顯示和隱藏來判斷是否符合輸入,在下篇文章中會寫道如何把陣列傳入後台並寫入資料庫。

動態新增或減少文字框,並獲取文字框值

很早之前,insus.net有實現過 點選一次銨鈕產生乙個新文字框,分別輸入值,然後獲取 今天想再次演練它,不過是在asp.net mvc的環境之下,使用jquery來實現。不使用web控制項。建立乙個檢視操作 在檢視中,放置兩個銨鈕和兩個div標籤,當用動態載入的容器 在檢視中,新增jquery的...

Vue 點選新增生成一組輸入框

場景 需要通過點選新增按鈕,來增加一組輸入框,填寫資訊。通過for迴圈資料的方式實現,點選新增,向陣列中增加一組資料 table資料 class paramdatadiv v for item,i in form.head key item.id class divinput v model ite...

點選按鈕動態新增新的一行(新增文字框)

類似的論壇上發表投票主題 using system using system.collections.generic using system.linq using system.web using system.web.ui using system.web.ui.webcontrols usin...