Gunakan JavaScript untuk melaksanakan gaya tersuai dan gesaan untuk borang

Dengan populariti aplikasi web, borang telah menjadi bahagian yang sangat diperlukan dalam kerja harian kami. Apabila kami menggunakan borang, kami biasanya perlu memasukkan beberapa maklumat asas untuk diserahkan kepada bahagian belakang untuk diproses. Walau bagaimanapun, bentuk tradisional mempunyai beberapa kekurangan, sama ada dari segi estetika mahupun kemesraan operasi. Oleh itu, dalam artikel ini, kami akan menumpukan pada cara menggunakan JavaScript untuk melaksanakan gaya tersuai dan gesaan untuk borang.

1. Laksanakan penyesuaian borang

Untuk melaksanakan penyesuaian borang, kita perlu memahami struktur asas dan atribut elemen bentuk HTML. Dalam halaman web, kami biasanya menggunakan teg borang untuk mentakrifkan borang, dan kemudian menambah pelbagai elemen borang dalam teg borang, seperti input, pilih, textarea, dsb. Kemudian, untuk elemen bentuk ini, kita boleh menggunakan CSS untuk menggayakannya. Walau bagaimanapun, jika kami ingin melaksanakan gaya tersuai yang lebih kompleks, kami perlu menggunakan JavaScript untuk beroperasi.

1. Tambahkan nama kelas pada elemen borang

Sebelum melaksanakan penyesuaian gaya elemen borang, kita perlu menambah nama kelas pada elemen borang terlebih dahulu. Dalam HTML, kita boleh menggunakan atribut kelas untuk menambah satu atau lebih nama kelas pada elemen, contohnya:

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

Dalam CSS, kita boleh menggunakan pemilih kelas untuk memilih nama kelas, contohnya:

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

Dengan cara ini, kita boleh menetapkan beberapa gaya asas untuk elemen bentuk.

2. Tambah keadaan untuk membentuk elemen

Selain gaya asas, elemen bentuk juga mempunyai beberapa keadaan khas yang perlu diproses, seperti: fokus, nyahfokus, tetikus berakhir, dll. Untuk melaksanakan gaya ini, kita perlu menggunakan JavaScript untuk memanipulasi keadaan elemen bentuk.

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";
});

Dengan cara ini, kita boleh menambah gaya dalam pelbagai keadaan pada elemen bentuk.

3. Mencapai kesan pautan unsur bentuk

Dalam borang, terdapat kesan pautan antara beberapa elemen bentuk, contohnya: pilihan kotak pilihan lungsur turun bergantung pada lungsur turun peringkat sebelumnya Pilih pilihan kotak dan banyak lagi. Untuk mencapai kesan pautan ini, kami juga perlu menggunakan 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>

Dengan cara ini, kita boleh mencapai kesan kaitan antara elemen bentuk.

2. Laksanakan pengesahan data dan gesaan untuk borang

Selain penyesuaian gaya, borang itu juga memerlukan pengesahan dan gesaan data. Apabila kita mengisi borang, kita selalunya perlu memberikan gesaan yang berbeza berdasarkan senario yang berbeza Contohnya: apabila kotak input kosong, kita perlu menggesa bahawa ia tidak boleh kosong, kandungan input dalam kotak input adalah salah. format, dsb. Oleh itu, kami perlu menambah pengesahan data yang sepadan dan fungsi segera pada borang semasa proses pembangunan.

1. Gunakan ungkapan biasa untuk pengesahan data

Apabila mengesahkan data borang, biasanya kami perlu menggunakan ungkapan biasa untuk pemadanan dan pengesahan. Contohnya: untuk mengesahkan sama ada format nombor telefon bimbit adalah betul, anda boleh menggunakan kod berikut:

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;
}

Dalam contoh ini, kami menggunakan ungkapan biasa untuk memadankan 11 digit bermula dengan 1. Jika nombor telefon mudah alih format tidak betul, pop timbul akan muncul.

2. Laksanakan pengesahan masa nyata dan gesaan paparan

Selain pengesahan ungkapan biasa, kami juga boleh melaksanakan pengesahan masa nyata dan gesaan paparan. Sebagai contoh: untuk menetapkan kotak kata laluan mesti mengandungi huruf besar dan huruf kecil dan nombor, anda boleh menggunakan kod berikut:

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

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

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

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

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

Dalam contoh ini, kita perlu mengesahkan bahawa kandungan yang dimasukkan dalam kotak input mesti mengandungi huruf besar dan huruf kecil dan nombor. Untuk merealisasikan fungsi ini, kami menambah pendengar acara input pada kotak input Apabila pengguna memasukkan kandungan dalam kotak input, ia akan disahkan dalam masa nyata dan gesaan akan dipaparkan.

3. Ringkasan

Melalui pengenalan artikel ini, kami telah mempelajari cara menggunakan JavaScript untuk melaksanakan gaya tersuai dan gesaan untuk borang. Dari segi penyesuaian bentuk, menggunakan JavaScript boleh memberi kami ruang operasi yang lebih fleksibel dan dapat merealisasikan pelbagai keperluan perniagaan yang kompleks. Oleh itu, mempunyai pemahaman yang mendalam tentang penyesuaian borang JavaScript dan penggunaannya yang mahir adalah sangat penting untuk kerja pembangunan web kami.

Atas ialah kandungan terperinci Gunakan JavaScript untuk melaksanakan gaya tersuai dan gesaan untuk borang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!