Gunakan fungsi JavaScript untuk mengisi automatik dan mengesahkan borang

Pelaksanaan fungsi JavaScript pengisian automatik borang dan pengesahan

Dalam pembangunan web, borang adalah elemen yang sangat biasa, dan kita sering memerlukan Isi dan mengesahkan borang. Menggunakan fungsi JavaScript boleh merealisasikan pengisian automatik dan fungsi pengesahan borang, meningkatkan pengalaman pengguna dan ketepatan data. Dalam artikel ini, saya akan memperkenalkan cara menggunakan fungsi JavaScript untuk melaksanakan autoisi dan pengesahan borang, serta memberikan contoh kod khusus.

1. Auto isi borang

Autoisi borang boleh mengurangkan input manual yang membosankan dan meningkatkan kecekapan apabila pengguna mengisi borang. Biasanya, kami boleh menyimpan maklumat pengguna terlebih dahulu, seperti nama, e-mel, nombor telefon, dsb., dan kemudian secara automatik mengisi maklumat ini ke dalam borang yang sepadan apabila pengguna melawat halaman web.

Kod sampel adalah seperti berikut:

// 假设用户信息存储在一个对象中
var userInfo = {
  name: "张三",
  email: "zhangsan@example.com",
  phone: "123456789"
};

// 自动填充表单
function autoFillForm() {
  document.getElementById("name").value = userInfo.name;
  document.getElementById("email").value = userInfo.email;
  document.getElementById("phone").value = userInfo.phone;
}

// 在页面加载完成后调用自动填充函数
window.onload = function() {
  autoFillForm();
};

Dalam kod di atas, kami mula-mula menentukan objek userInfo untuk menyimpan maklumat pengguna, yang mengandungi nilai-nilai nama , e-mel dan nombor telefon. Kemudian melalui fungsi autoFillForm yang mengisi borang secara automatik, kita boleh menetapkan nilai-nilai ini kepada atribut nilai elemen borang yang sepadan untuk mencapai kesan pengisian automatik. Akhir sekali, panggil sahaja fungsi autoFillForm selepas halaman dimuatkan.

2. Pengesahan borang

Pengesahan borang adalah untuk memastikan maklumat yang diisi oleh pengguna mematuhi peraturan atau format tertentu untuk mengelakkan penyerahan berniat jahat atau ralat data. Pengesahan borang biasa termasuk: pengesahan medan yang diperlukan, pengesahan format e-mel, pengesahan format nombor telefon mudah alih, dsb.

Kod sampel adalah seperti berikut:

// 表单验证
function formValidation() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var phone = document.getElementById("phone").value;

  // 验证姓名是否为空
  if (name === "") {
    alert("请输入姓名！");
    return false;
  }

  // 验证邮箱格式
  var emailPattern = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;
  if (!emailPattern.test(email)) {
    alert("请输入有效的邮箱地址！");
    return false;
  }

  // 验证手机号格式
  var phonePattern = /^1[3456789]d{9}$/;
  if (!phonePattern.test(phone)) {
    alert("请输入有效的手机号码！");
    return false;
  }

  // 验证通过，可提交表单
  alert("提交成功！");
  return true;
}

Dalam kod di atas, kami memperoleh nilai setiap kotak input dalam borang dan menggunakan ungkapan biasa untuk pengesahan yang sepadan. Jika pengesahan gagal, mesej segera muncul dan mengembalikan palsu, menghalang penyerahan borang jika pengesahan lulus, mesej segera yang menunjukkan penyerahan berjaya muncul dan mengembalikan benar, membenarkan penyerahan borang.

Untuk menggunakan fungsi pengesahan borang, anda boleh menambah acara onclick pada butang hantar borang, seperti berikut:

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" required>

  <label for="email">邮箱：</label>
  <input type="email" id="email" required>

  <label for="phone">电话：</label>
  <input type="tel" id="phone" required>

  <input type="submit" value="提交" onclick="return formValidation()">
</form>

Dalam kod di atas, kami berada dalam onclick acara butang hantar Fungsi formValidation dipanggil dan kata kunci pulangan digunakan untuk menerima nilai pulangan fungsi. Jika benar dikembalikan, penyerahan borang dibenarkan jika palsu dikembalikan, penyerahan borang dihalang.

Ringkasan:

Dengan menggunakan fungsi JavaScript untuk merealisasikan pengisian automatik dan pengesahan borang, kami boleh menjadikannya lebih mudah dan tepat untuk pengguna mengisi borang. Kod di atas menyediakan pelaksanaan khusus pengisian borang automatik dan pengesahan borang, yang boleh diubah suai dan dikembangkan mengikut keperluan sebenar. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Gunakan fungsi JavaScript untuk mengisi automatik dan mengesahkan borang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!