JS はテキスト ボックスのグループを追加および削除し、入力情報を検証してその正確性を判断します_javascript スキル

プロジェクト中にこのような問題が発生しました。つまり、データベースにいくつかのデータ セットを追加する必要がありますが、特定のデータ セットが不明なため、顧客が入力する必要があります。割引戦略には、「100 個以上の購入で 50% オフ、200 個以上の購入で 40% オフ、500 個以上の購入で 30% オフ」など、戦略ごとに多くのセットのプランが存在します。プランはあるのですが、プランの集合にサブプランが何個あるのかが定かではないので、ここではJSを使ってサブスキームの追加と削除を行い、入力されたスキームの正当性を判断し、JSON送信でデータベースに書き込みます。ここでは主に、サブプロジェクトのグループを追加および削除する方法と、各テキスト ボックスに検証を追加する方法を書きます。

テキスト ボックスのグループを動的に追加します:

コードをコピーします コードは次のとおりです:

var countTable = 0;
//テーブルの行を追加
addTable = function () {
//テーブルを取得します
var tab1 = document.getElementById("discountTable") ;
// テーブル内のすべてのセルの数
// cell = tab1.cells.length;
// テーブル内の行数
n = tab1.rows.length;
//テーブル内の列の数
//cell = cell / n;
//テーブルに行を追加します
r = tab1.insertRow(n); /現在の行の各セルを追加します
r.insertCell(0).innerHTML = 'X元の支出: *' ;
r.insertCell(1).innerHTML = '割引率: ;label class="veritifyMessage" style="display: none;font-size:16px ;color: #F00; width:10px;float:right">*';
r.insertCell( 2).innerHTML = '' ;
countTable = countTable 1;
}

注:
1. ここでの countTable は、各行を確実に識別するために使用される変数である必要があります。は異なり、行を削除した後の ID の重複を防ぎます。
2. 各テキストに対してフォーカス離脱イベントが追加されます。つまり、フォーカスが現在のテキスト ボックスから離れるときに、それが入力と一致するかどうかを判断する必要があります。
3. テキスト ボックスの後に検証コントロールとしてラベルが追加されます。入力したテキストが要件を満たしていない場合、ラベルが表示されます。
任意の行を削除します:

コードをコピー コードは次のとおりです:

//現在の行を削除します
deleteTable = function (el) {
//alert( el.id)
//テーブルを取得します
var tab1 = document.getElementById("discountTable"); >//ループ 削除する必要がある行を決定します
for (i = 0; i //行の ID を取得します
var deleteValue = tab1.rows[i].cells[ 2].childNodes[0].id;
//ループして各行の ID を取得し、現在クリックされている ID と比較します。同じ場合は削除します。 🎜>if (el.id == deleteValue) {
tab1.deleteRow (i);
break; 1 行が現在のポイントの行となり、その後削除されます。
検証コントロールの表示と非表示を切り替える方法 (フォーカスがテキストから離れたときにテキストを判断します):




コードをコピー

Code As

//最初の情報入力が正当であるかどうかを検証します。 terifyNumFirst = function (objText) { var terifyText = objText.value //情報は無効です。 empty if (terifyText== "") { objText.parentNode.children[1].style.display="block";

return;情報 数値である必要があります

if (isNaN(terifyText))
{
objText.parentNode.children[1].style.display = "block"
} objText .parentNode.children[1].style.display = "none";
}


すべての情報を書き込む必要がある場合は、判断も必要です。それ以外の場合は、データテーブルが生成されて返されます。バックグラウンドに送信する具体的な方法については、次のブログで説明します。




コードをコピー


コードは次のとおりです:

//DataTable object を生成
functiongenerateDtb() {
//データをフラグに書き込めるかどうかを決定します。false は書き込み可能、​​true は書き込みできないことを意味します
var flag = false;
//テーブルを取得します
var tab1 = document.getElementById("discountTable");
//最初の列のデータ
var firstGroup = document.getElementsByClassName("groupFirst") ;
//2 番目の列データ
var SecondGroup = document.getElementsByClassName("groupSecond");
//検証情報が正当かどうかを判断します
var veritify = document.getElementsByClassName("veritifyMessage") ;
//alert(secondGroup.item(0).value);
//(var i = 0; i について空かどうかを判断します。 {
/ /データの最初の列が空かどうかを判断します。空の場合は、プロンプトを表示します。
if (firstGroup[i].value == "")
{
veritify[( i * 2)].style.display = "block";
flag = true;
}
//データの 2 番目の列が空であるかどうかを判断します。空の場合は、プロンプトが表示されます。
if (firstGroup[i].value == "" )
{
veritify[(i * 2 1)].style.display = "ブロック"
flag = true; >}
}
for (var i = 0 ; i {
if (veritify[i].style.display == "block")
{
flag = true;
}
}
//alert(veritify.length);
//入力された情報はすべて配列に編成され、情報は処理のために返されます。
if (flag == false) {
//書き込み
var txtName = document.getElementById("txtName").value;
// 配列を作成します
var dtb = new Array ( );
//ループを通じてデータを配列に書き込み、
for (var i = 0; i var row = new Object(); row.Name = txtName;
row.fullMoney = firstGroup[i].value;
dtb.push(row); >return dtb;
}


ここでの検証も比較的単純で、テキスト ボックスの入力が空であるかどうか、および数値であるかどうかを検証し、テキスト ボックスの表示と非表示を使用します。入力に従って、配列をバックグラウンドに渡してデータベースに書き込む方法を次の記事で書きます。