JS添加刪除一組文本框并對(duì)輸入信息加以驗(yàn)證判斷其正確性
更新時(shí)間:2013年04月11日 15:57:24 作者:
需要添加幾組數(shù)據(jù)到數(shù)據(jù)庫(kù),但是具體幾組數(shù)據(jù)不確定,有客戶來(lái)填寫,所以,這里我用JS進(jìn)行添加刪除子方案,并要對(duì)方案輸入的正確性加以判斷,感興趣的朋友可以了解下
在做項(xiàng)目中遇到這樣一個(gè)問(wèn)題,就是我們需要添加幾組數(shù)據(jù)到數(shù)據(jù)庫(kù),但是具體幾組數(shù)據(jù)不確定,有客戶來(lái)填寫,比如我們需要添加打折策略,可能個(gè)策略有很多組方案,比如“滿100打5折,滿200打4折,滿500打3折”等等,這是作為一組方案來(lái)執(zhí)行的,但是并不確定一組方案中有幾個(gè)子方案,所以,這里我用JS進(jìn)行添加刪除子方案,并要對(duì)方案輸入的正確性加以判斷,并且通過(guò)json傳輸寫入數(shù)據(jù)庫(kù),這里我們主要寫如果添加刪除一組子項(xiàng)目和如果給每個(gè)文本框添加驗(yàn)證。
動(dòng)態(tài)添加一組文本框:
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可見。
刪除任意一行:
//刪除當(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除行的位置,這里就需要通過(guò)循環(huán)對(duì)比表格中哪一行是當(dāng)前點(diǎn)中行,然后進(jìn)行刪除。
如何顯示和隱藏驗(yàn)證控件(當(dāng)焦點(diǎn)離去文本時(shí),對(duì)文本進(jìn)行判斷):
//驗(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ì)在下篇博客中寫道。
//生成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();
//通過(guò)循環(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;
}
這里的驗(yàn)證也相對(duì)比較簡(jiǎn)單,只是驗(yàn)證文本框輸入是否為空和是否為數(shù)字,用一個(gè)label的顯示和隱藏來(lái)判斷是否符合輸入,在下篇文章中會(huì)寫道如何把數(shù)組傳入后臺(tái)并寫入數(shù)據(jù)庫(kù)。
動(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除行的位置,這里就需要通過(guò)循環(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();
//通過(guò)循環(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;
}
這里的驗(yàn)證也相對(duì)比較簡(jiǎn)單,只是驗(yàn)證文本框輸入是否為空和是否為數(shù)字,用一個(gè)label的顯示和隱藏來(lái)判斷是否符合輸入,在下篇文章中會(huì)寫道如何把數(shù)組傳入后臺(tái)并寫入數(shù)據(jù)庫(kù)。
您可能感興趣的文章:
- ExtJS4的文本框(textField)使用正則表達(dá)式進(jìn)行驗(yàn)證(Regex)的方法
- 鼠標(biāo)焦點(diǎn)離開文本框時(shí)驗(yàn)證的js代碼
- JS文本框不能輸入空格驗(yàn)證方法
- jsp+ajax實(shí)現(xiàn)無(wú)刷新(鼠標(biāo)離開文本框即驗(yàn)證用戶名)實(shí)現(xiàn)思路
- js各種驗(yàn)證文本框輸入格式(正則表達(dá)式)
- javascript 基于正則表達(dá)式的文本框驗(yàn)證代碼
- javascript 遍歷驗(yàn)證所有文本框的值
- javascript實(shí)現(xiàn)文本框標(biāo)簽驗(yàn)證的實(shí)例代碼
相關(guān)文章
JavaScript+HTML5實(shí)現(xiàn)的日期比較功能示例
這篇文章主要介紹了JavaScript+HTML5實(shí)現(xiàn)的日期比較功能,涉及javascript結(jié)合HTML5針對(duì)日期的轉(zhuǎn)換與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-07-07簡(jiǎn)單了解微信小程序 e.target與e.currentTarget的不同
這篇文章主要介紹了微信小程序 e.target與e.currentTarget的區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09漂亮的widgets,支持換膚和后期開發(fā)新皮膚(2007-4-27已更新1.7alpha)
漂亮的widgets,支持換膚和后期開發(fā)新皮膚(2007-4-27已更新1.7alpha)...2007-04-04詳細(xì)講解js實(shí)現(xiàn)電梯導(dǎo)航的實(shí)例
對(duì)于某一個(gè)頁(yè)面內(nèi)容繁多,如果我們滾動(dòng)的時(shí)間較長(zhǎng),為了增加用戶體驗(yàn),我們需要實(shí)現(xiàn)點(diǎn)擊某一個(gè)按鈕,然后滾動(dòng)到對(duì)應(yīng)的區(qū)域,滾動(dòng)的時(shí)候,右側(cè)對(duì)應(yīng)的分類實(shí)現(xiàn)高亮,所以本文給大家詳細(xì)介紹講解了js實(shí)現(xiàn)電梯導(dǎo)航,需要的朋友可以參考下2023-10-10