JavaScriptでPINコードの検証(バリデーション)を実装する方法
PIN(暗証番号)の検証は、「文字列型であること」「桁数が適切であること」などの条件に基づいて行うことができます。本記事では、JavaScriptを使ってPINの妥当性をチェックするシンプルな関数の実装例を紹介します。
検証の条件
このサンプルでは、以下の条件をすべて満たす場合のみ「有効なPIN」として判定します。
- 値が文字列型(string)であること
- 小数点(.)を含まないこと
- 数値に変換できること(NaNでないこと)
- 桁数が2桁または4桁であること
実装例
以下は、PINを検証する関数のサンプルコードです。
function simpleValidationForPin(pinValues) {
if (!(typeof pinValues === "string" && !~pinValues.indexOf('.') && !isNaN(Number(pinValues)) && (pinValues.length === 2 || pinValues.length === 4))) {
return false;
} else {
return true;
}
}
if (simpleValidationForPin("0000.00") == true)
console.log("This is a valid pin")
else
console.log("This is not a valid pin")
if (simpleValidationForPin(66) == true)
console.log("This is a valid pin")
else
console.log("This is not valid pin")
if (simpleValidationForPin("4444") == true)
console.log("This is a valid pin")
else
console.log("This is not a valid pin")
if (simpleValidationForPin("66") == true)
console.log("This is a valid pin")
else
console.log("This is not valid pin")
if (simpleValidationForPin("666") == true)
console.log("This is a valid pin")
else
console.log("This is not a valid pin")上記のプログラムを実行するには、Node.jsで次のコマンドを使用します。
node fileName.js
ここでは、ファイル名を demo254.js として保存しています。
出力結果
コンソールには以下のような出力が表示されます。
PS C:\Users\Amit\javascript-code> node demo254.js This is not a valid pin This is not a valid pin This is a valid pin This is a valid pin This is not a valid pin
実行結果の解説
- "0000.00" → 小数点が含まれているため無効
- 66(数値) → 文字列型ではないため無効
- "4444" → 文字列型かつ4桁のため有効
- "66" → 文字列型かつ2桁のため有効
- "666" → 桁数が3桁で条件外のため無効
このように、データ型と桁数を組み合わせてチェックすることで、意図しない入力(数値型や小数点を含む値、不正な桁数など)を確実に排除できます。用途に応じて正規表現を使った検証や、許容する桁数の変更なども検討するとよいでしょう。
-
JavaScriptでinnerHTMLを設定する方法をわかりやすく解説
JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド
-
JavaScriptでCSS変数を取得・設定する方法
JavaScriptを活用すると、CSS変数(カスタムプロパティ)の値を動的に読み取ったり、書き換えたりすることができます。ポイントになるのは、次の3つのメソッドです。 1. getComputedStyle() ― 適用済みスタイルの取得 getComputedStyle()メソッドは、対象の要素に実際に適用されているすべてのスタイル情報を含むオブジェクトを返します。このオブジェクトには、CSS変数の値も含まれています。 2. getPropertyValue() ― 目的のプロパティ値の取得 getComputedStyle()が返したオブジェクトに対してgetPropertyVal