ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用してフォームの入力ボックスの内容のリアルタイム検証を実装するにはどうすればよいですか?
JavaScript を使用してフォームの入力ボックスの内容のリアルタイム検証を実装するにはどうすればよいですか?
多くの Web アプリケーションでは、フォームがユーザーとシステムの間で最も一般的に使用される対話方法です。ただし、データの正確性と完全性を保証するために、ユーザーが入力したコンテンツを検証する必要があることがよくあります。この記事では、JavaScript を使用してフォームの入力ボックスの内容のリアルタイム検証を実装する方法を学び、具体的なコード例を示します。
<form> <label for="username">用户名:</label> <input type="text" id="username" required> <br> <label for="password">密码:</label> <input type="password" id="password" required> <br> <label for="email">邮箱:</label> <input type="email" id="email" required> </form>
// 选择输入框 const usernameInput = document.getElementById('username'); const passwordInput = document.getElementById('password'); const emailInput = document.getElementById('email'); // 添加校验事件 usernameInput.addEventListener('input', validateUsername); passwordInput.addEventListener('input', validatePassword); emailInput.addEventListener('input', validateEmail);
function validateUsername() { const regex = /^[a-zA-Z0-9_-]{3,16}$/; const value = usernameInput.value; if (regex.test(value)) { // 校验通过 usernameInput.classList.remove('invalid'); usernameInput.classList.add('valid'); } else { // 校验失败 usernameInput.classList.remove('valid'); usernameInput.classList.add('invalid'); } } function validatePassword() { const regex = /^[a-zA-Z0-9!@#$%^&*]{6,16}$/; const value = passwordInput.value; if (regex.test(value)) { // 校验通过 passwordInput.classList.remove('invalid'); passwordInput.classList.add('valid'); } else { // 校验失败 passwordInput.classList.remove('valid'); passwordInput.classList.add('invalid'); } } function validateEmail() { const regex = /^[^s@]+@[^s@]+.[^s@]+$/; const value = emailInput.value; if (regex.test(value)) { // 校验通过 emailInput.classList.remove('invalid'); emailInput.classList.add('valid'); } else { // 校验失败 emailInput.classList.remove('valid'); emailInput.classList.add('invalid'); } }
.valid { border: 1px solid green; } .invalid { border: 1px solid red; }
ここまでで、JavaScript を使用してフォームの入力ボックスの内容のリアルタイム検証機能を実装する手順が完了しました。ユーザーが入力ボックスに入力を行う際、バリデーション機能を利用して入力内容をチェックし、バリデーション結果に基づいて入力ボックスのスタイルを更新します。これにより、ユーザーは即時フィードバックを得ることができ、エラーを見つけてより迅速に修正できるようになります。
概要
この記事では、JavaScript を使用してフォームの入力ボックスの内容のリアルタイム検証を実装する方法を学習しました。入力ボックスを選択し、検証イベントを追加し、検証関数を記述し、検証結果をスタイル設定することにより、フォーム入力をより適切に実行できるようにする即時フィードバック方法をユーザーに提供できます。これは、ユーザー エクスペリエンスとデータの品質を向上させ、誤った操作による影響を軽減できる、シンプルで実用的なヒントです。
以上がJavaScript を使用してフォームの入力ボックスの内容のリアルタイム検証を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。