快捷導(dǎo)航

JS添加刪除一組文本框并對(duì)輸入信息加以驗(yàn)證判斷其正確性

更新時(shí)間：2013年04月11日 15:57:24 作者：

需要添加幾組數(shù)據(jù)到數(shù)據(jù)庫，但是具體幾組數(shù)據(jù)不確定，有客戶來填寫，所以，這里我用JS進(jìn)行添加刪除子方案，并要對(duì)方案輸入的正確性加以判斷，感興趣的朋友可以了解下

在做項(xiàng)目中遇到這樣一個(gè)問題，就是我們需要添加幾組數(shù)據(jù)到數(shù)據(jù)庫，但是具體幾組數(shù)據(jù)不確定，有客戶來填寫，比如我們需要添加打折策略，可能個(gè)策略有很多組方案，比如“滿100打5折，滿200打4折，滿500打3折”等等，這是作為一組方案來執(zhí)行的，但是并不確定一組方案中有幾個(gè)子方案，所以，這里我用JS進(jìn)行添加刪除子方案，并要對(duì)方案輸入的正確性加以判斷，并且通過json傳輸寫入數(shù)據(jù)庫，這里我們主要寫如果添加刪除一組子項(xiàng)目和如果給每個(gè)文本框添加驗(yàn)證。

動(dòng)態(tài)添加一組文本框：

復(fù)制代碼代碼如下:

 
var countTable = 0; 
//添加表格行 
addTable = function () { 
//獲得表格 
var tab1 = document.getElementById("discountTable"); 
//table中所有的單元格數(shù) 
// cell = tab1.cells.length; 
//table 中行數(shù) 
n = tab1.rows.length; 
//table 中的列數(shù) 
//cell = cell / n; 
//向table中加入行 
r = tab1.insertRow(n); 
//添加當(dāng)前行的每個(gè)單元格 
r.insertCell(0).innerHTML = '消費(fèi)滿X元： <input type=\'text\' style="width:150px;" onblur="terifyNumFirst(this)" class =\'groupFirst\' /><label class="veritifyMessage" style="display:none; color: #F00;font-size:16px; width:10px;float:right">*</label>'; 
r.insertCell(1).innerHTML = '打折率：<input type=\'text\' style="width:150px;" onblur="terifyNumSecond(this)" class =\'groupSecond\' /><label class="veritifyMessage" style="display:none;font-size:16px ;color: #F00; width:10px;float:right">*</label>'; 
r.insertCell(2).innerHTML = '<input type="image" name="imageField" id="'+countTable+'" onclick="deleteTable(this)" src="../images/closeStraty.jpg" />'; 
countTable = countTable + 1; 
} 

注：
1.這里的countTable應(yīng)為全部變量，用于對(duì)每一行進(jìn)行標(biāo)識(shí)，這樣就確定每一行都是不同的，防止刪除一行后ID重復(fù)的情況。
2.在這里為每一個(gè)text添加了焦點(diǎn)離去事件，即當(dāng)焦點(diǎn)離開當(dāng)前文本框時(shí)，我們需要對(duì)其嚴(yán)重是否符合輸入。
3.在文本框后加了label，作為驗(yàn)證控件，當(dāng)我們輸入的文本不符合要求時(shí)，該label可見。
刪除任意一行：

復(fù)制代碼代碼如下:

 
//刪除當(dāng)前行 
deleteTable = function (el) { 
// alert( el.id); 
//獲取table 
var tab1 = document.getElementById("discountTable"); 
//循環(huán)判斷需要?jiǎng)h除的行 
for (i = 0; i < tab1.rows.length; i++) { 
//獲取行的ID 
var deleteValue = tab1.rows[i].cells[2].childNodes[0].id; 
//循環(huán)獲得每行的id與當(dāng)前點(diǎn)擊的ID比較，相同則刪除 
if (el.id == deleteValue) { 
tab1.deleteRow(i); 
break; 
} 
} 
} 

首先我們需要是或許要?jiǎng)h除行的位置，這里就需要通過循環(huán)對(duì)比表格中哪一行是當(dāng)前點(diǎn)中行，然后進(jìn)行刪除。
如何顯示和隱藏驗(yàn)證控件（當(dāng)焦點(diǎn)離去文本時(shí)，對(duì)文本進(jìn)行判斷）：

復(fù)制代碼代碼如下:

 
//驗(yàn)證第一條信息輸入是否合法 
terifyNumFirst = function (objText) { 
var terifyText = objText.value; 
//信息不能為空 
if (terifyText== "") 
{ 
objText.parentNode.children[1].style.display="block"; 
return; 
} 
//信息必須為數(shù)字 
if (isNaN(terifyText)) 
{ 
objText.parentNode.children[1].style.display = "block"; 
return; 
} 
objText.parentNode.children[1].style.display = "none"; 
} 

當(dāng)全部信息需要寫入時(shí)，我們同樣需要進(jìn)行判斷，如果有不合法的提示，否則生成datatable返回，具體如何往后臺(tái)傳輸，會(huì)在下篇博客中寫道。

復(fù)制代碼代碼如下:

 
//生成DataTable對(duì)象 
function generateDtb() { 
//判斷數(shù)據(jù)是否可以寫入標(biāo)志，false為可以寫入，true為不可以寫入 
var flag = false; 
//獲取table 
var tab1 = document.getElementById("discountTable"); 
//第一列數(shù)據(jù) 
var firstGroup = document.getElementsByClassName("groupFirst"); 
//第二列數(shù)據(jù) 
var secondGroup = document.getElementsByClassName("groupSecond"); 
//判斷驗(yàn)證信息是否合法 
var veritify = document.getElementsByClassName("veritifyMessage"); 
// alert(secondGroup.item(0).value); 
//判斷是否為空 
for (var i = 0; i < firstGroup.length; i++) 
{ 
//判斷第一列數(shù)據(jù)是否為空，為空則顯示提示 
if (firstGroup[i].value == "") 
{ 
veritify[(i * 2)].style.display = "block"; 
flag = true; 
} 
//判斷第二列數(shù)據(jù)是否為空，為空則顯示提示 
if (secondGroup[i].value == "") 
{ 
veritify[(i * 2 + 1)].style.display = "block"; 
flag = true; 
} 
} 
for (var i = 0; i < veritify.length; i++) 
{ 
if (veritify[i].style.display == "block") 
{ 
flag = true; 
} 
} 
// alert(veritify.length); 
//如何輸入信息都合法，則整理當(dāng)前信息為數(shù)組，返回該信息進(jìn)行處理。 
if (flag == false) { 
//寫入 
var txtName = document.getElementById("txtName").value; 
//創(chuàng)建數(shù)組 
var dtb = new Array(); 
//通過循環(huán)把數(shù)據(jù)寫入到數(shù)組并返回 
for (var i = 0; i < firstGroup.length; i++) { 
var row = new Object(); 
row.Name = txtName; 
row.fullMoney = firstGroup[i].value; 
row.discount = secondGroup[i].value; 
dtb.push(row); 
} 
return dtb; 
} 