JavaScript を使用してフォームのカスタムスタイルとプロンプトを実装する-jsチュートリアル-php.cn

JavaScript を使用してフォームのカスタムスタイルとプロンプトを実装する

王林

リリース： 2023-06-15 14:41:33

オリジナル

1468 人が閲覧しました

Web アプリケーションの人気により、フォームは私たちの日常業務に不可欠な部分になりました。フォームを使用するときは、通常、処理のためにバックエンドに送信するための基本情報を入力する必要があります。ただし、従来の形式には、美観や操作性の点でいくつかの欠点があります。したがって、この記事では、JavaScript を使用してフォームのカスタムスタイルとプロンプトを実装する方法に焦点を当てます。

1. フォームのスタイルカスタマイズを実装する

フォームのスタイルカスタマイズを実現するには、まず HTML フォーム要素の基本構造と属性を理解する必要があります。 Web ページでは通常、form タグを使用してフォームを定義し、input、select、textarea などのさまざまなフォーム要素を form タグに追加します。次に、これらのフォーム要素に対して CSS を使用してスタイルを設定できます。ただし、より複雑なカスタムスタイルを実装したい場合は、JavaScript を使用して操作する必要があります。

フォーム要素にクラス名を追加する

フォーム要素のスタイルのカスタマイズを実装する前に、まずフォーム要素にクラス名を追加する必要があります。 HTML では、class 属性を使用して要素に 1 つ以上のクラス名を追加できます。例:

<input type="text" class="my-input">

ログイン後にコピー

CSS では、クラスセレクターを使用して特定のクラス名を選択できます。例:

.my-input {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
}

ログイン後にコピー

このようにして、フォーム要素の基本的なスタイルをいくつか設定できます。

フォーム要素にステータスを追加する

基本的なスタイルに加えて、フォーム要素には、フォーカス、フォーカス外など、処理が必要な特殊な状態もあります。、マウス通過など。これらのスタイルを実装するには、JavaScript を使用してフォーム要素の状態を操作する必要があります。

const myInput = document.querySelector('.my-input');

myInput.addEventListener('focus', function() {
  // 当元素聚焦时需要执行的操作
  myInput.style.border = "1px solid blue";
});

myInput.addEventListener('blur', function() {
  // 当元素失焦时需要执行的操作
  myInput.style.border = "1px solid #ccc";
});

myInput.addEventListener('mouseenter', function() {
  // 当鼠标经过元素时需要执行的操作
  myInput.style.backgroundColor = "#f5f5f5";
});

myInput.addEventListener('mouseleave', function() {
  // 当鼠标离开元素时需要执行的操作
  myInput.style.backgroundColor = "#fff";
});

ログイン後にコピー

このようにして、さまざまな状態のスタイルをフォーム要素に追加できます。

フォーム要素のリンク効果を実現する

フォームでは、いくつかのフォーム要素間にリンク効果があります。たとえば、ドロップダウン選択ボックスのオプションは依存します。前のレベルのドロップダウンで、ボックスのオプションなどを選択します。この連携効果を実現するには、JavaScript も使用する必要があります。

<select class="province">
  <option value="0">请选择省份</option>
  <option value="1">河北省</option>
  <option value="2">山东省</option>
  <option value="3">广东省</option>
</select>

<select class="city">
  <option value="0">请选择城市</option>
</select>

ログイン後にコピー

const provinceSelect = document.querySelector('.province');
const citySelect = document.querySelector('.city');

provinceSelect.addEventListener('change', function() {
  const provinceId = provinceSelect.value;
  // 根据省份获取对应的城市列表
  const cityList = getCityList(provinceId);
  // 清空城市下拉列表的选项
  citySelect.innerHTML = '<option value="0">请选择城市</option>';
  // 动态添加城市选项
  cityList.forEach(function(city) {
    const option = document.createElement('option');
    option.value = city.id;
    option.textContent = city.name;
    citySelect.appendChild(option);
  });
});

function getCityList(provinceId) {
  // 根据省份id获取对应的城市列表
  // ...
  return cityList;
}

ログイン後にコピー

このようにして、フォーム要素間の連携効果を実現できます。

2. フォームにデータ検証とプロンプトを実装する

スタイルのカスタマイズに加えて、フォームにはデータ検証とプロンプトも必要です。フォームに入力するとき、さまざまなシナリオに基づいてさまざまなプロンプトを提供する必要があることがよくあります。たとえば、入力ボックスが空の場合、空にすることはできない、入力ボックスの入力内容が間違っている、というプロンプトを表示する必要があります。フォーマットなどしたがって、開発プロセス中に、対応するデータ検証機能とプロンプト機能をフォームに追加する必要があります。

データ検証に正規表現を使用する

フォームデータを検証するときは、通常、照合と検証に正規表現を使用する必要があります。例: 携帯電話番号の形式が正しいかどうかを確認するには、次のコードを使用できます:

const phoneInput = document.querySelector('.phone-input');

phoneInput.addEventListener('blur', function() {
  const phone = phoneInput.value;
  if (!/^1d{10}$/.test(phone)) {
    alert('手机号码格式不正确');
  }
});

ログイン後にコピー

この例では、正規表現を使用して 1 から始まる 11 桁を照合します。形式が正しくない場合は、ポップアップが表示され、プロンプトボックスが表示されます。

リアルタイム検証を実装し、プロンプトを表示します。

正規表現検証に加えて、リアルタイム検証を実装し、プロンプトを表示することもできます。たとえば、パスワードボックスに大文字、小文字、数字を含める必要があると設定するには、次のコードを使用できます:

<input type="password" class="password-input" placeholder="请输入密码">

<div class="password-tip">密码需要包含大小写字母和数字</div>

ログイン後にコピー

.password-tip {
  color: red;
  display: none;
}

ログイン後にコピー

const passwordInput = document.querySelector('.password-input');
const passwordTip = document.querySelector('.password-tip');

passwordInput.addEventListener('input', function() {
  const value = passwordInput.value;
  if (/d/.test(value) && /[a-z]/.test(value) && /[A-Z]/.test(value)) {
    passwordTip.style.display = 'none';
  } else {
    passwordTip.style.display = 'block';
  }
});

ログイン後にコピー

この例では、入力ボックスに入力された内容に大文字が含まれている必要があることを確認する必要があります。小文字と数字。この機能を実現するために、入力ボックスに入力イベントリスナーを追加し、ユーザーが入力ボックスに内容を入力すると、リアルタイムに検証してプロンプトを表示します。

3. 概要

この記事の導入部を通じて、JavaScript を使用してフォームのカスタムスタイルとプロンプトを実装する方法を学びました。フォームのカスタマイズに関しては、JavaScript を使用することでより柔軟な操作スペースが得られ、さまざまな複雑なビジネスニーズを実現できます。したがって、JavaScript フォームのカスタマイズを深く理解し、それを上手に使用することは、Web 開発作業にとって非常に重要です。

以上がJavaScript を使用してフォームのカスタムスタイルとプロンプトを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。