Morioh
Login
中條 美冬

中條 美冬

11 months ago

jQuery を使用して国際電話番号を検証する方法と例

このチュートリアルでは、jquery を使用して国際電話番号を検証する方法を見ていきます。ここでは、jqueryを使用した国別の携帯電話番号検証について学びます。場合によっては、国ごとの電話番号の検証が必要になることがありました。国が異なれば、電話番号や携帯電話番号の長さも異なります。

ここでは、検証に国際電話入力プラグインを使用します。国際電話入力は、純粋な JavaScript で書かれた、国際電話番号を処理するためのプラグインです。これにより、ユーザーが電話番号を入力したり、バックエンドに保存する前に電話番号を検証したりすることが簡単になります。

デフォルトでは、国ドロップダウンが入力に追加され、プレースホルダーが選択された国のサンプル番号に設定されます。初期化中の IP ルックアップに基づいてユーザーの現在の国を自動的に選択するオプションもあります。

例を使用して jQuery で国際電話番号を検証する方法

<html lang="en">
<head>
	<title>How To Validate International Phone Number Using jQuery - Techsolutionstuff</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/css/intlTelInput.css">
</head>
<body>
	<div class="col-md-6 offset-md-2">
		<div class="container mt-5">
			<div class="card">
				<div class="card-header">
					<strong>How To Validate International Phone Number Using jQuery - Techsolutionstuff</strong>
				</div>
				<div class="card-body">
					<h6 class="card-title">Phone Number:</h6>
					<input id="phone" type="tel">
					<span id="valid-msg" class="hide">✓ Valid</span>
					<span id="error-msg" class="hide"></span>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/intlTelInput.min.js"></script>

CSS ファイル:

.hide {
  display: none;
}
#valid-msg {
  color: #00c900;
}

jQueryファイル

ユーザー入力をバックエンドに保存する前に検証することが重要です。国際電話入力では、true または false を返すメソッドを使用できます isValidNumber 。false が返され、さらに詳細が必要な場合は、 getValidationError メソッドを使用して詳細情報を取得できます。

const input = document.querySelector("#phone");
const errorMsg = document.querySelector("#error-msg");
const validMsg = document.querySelector("#valid-msg");

// here, the index maps to the error code returned from getValidationError - see readme
const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

// initialise plugin
const iti = window.intlTelInput(input, {
	utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/utils.js"
});

const reset = () => {
	input.classList.remove("error");
	errorMsg.innerHTML = "";
	errorMsg.classList.add("hide");
	validMsg.classList.add("hide");
};

// on blur: validate
input.addEventListener('blur', () => {
	reset();
	if (input.value.trim()) {
		if (iti.isValidNumber()) {
			validMsg.classList.remove("hide");
		} else {
			input.classList.add("error");
			const errorCode = iti.getValidationError();
			errorMsg.innerHTML = errorMap[errorCode];
			errorMsg.classList.remove("hide");
		}
	}
});

// on keyup / change flag: reset
input.addEventListener('change', reset);
input.addEventListener('keyup', reset);

ハッピーコーディング!!!

1.00 GEEK