dw melaksanakan pengesahan borang javascript

Dalam pembangunan bahagian hadapan, pengesahan borang adalah bahagian yang sangat penting. Ia memastikan bahawa data yang dimasukkan oleh pengguna memenuhi keperluan dan memberikan pengalaman pengguna yang lebih baik. JavaScript ialah bahasa pengaturcaraan yang sangat popular dan berkuasa yang boleh digunakan untuk melaksanakan pengesahan borang. Dalam artikel ini, kami akan memperkenalkan cara menggunakan dw (Dreamweaver) untuk melaksanakan pengesahan borang JavaScript.

dw ialah editor HTML dan alat pembangunan tapak web yang hebat. Ia mempunyai alat visual dan editor kod yang kaya yang boleh membantu pembangun mencipta dan mengurus tapak web dengan lebih cekap. dw juga menyediakan gesaan kod JavaScript dan fungsi semakan sintaks, menjadikan penulisan kod JavaScript lebih mudah dan pantas.

Sebelum bermula, kami memerlukan borang. Mencipta borang dalam dw adalah sangat mudah, hanya gunakan panel kawalan borang. Pilih "Tetingkap" -> "Kawalan" dalam bar menu dw untuk membuka panel kawalan borang. Pilih kawalan borang yang diperlukan dalam panel dan seretnya ke tengah halaman. Dalam artikel ini, kami akan menggunakan borang log masuk mudah sebagai contoh untuk melaksanakan pengesahan borang.

Berikut ialah pelaksanaan kod:

1. Melaksanakan pengesahan e-mel

Dalam borang log masuk, pengguna perlu memasukkan e-mel mereka, jadi kami perlu untuk mengesahkan E-mel input pengguna untuk pengesahan.

Pertama, kita perlu menentukan id untuk kotak input e-mel untuk beroperasi dalam JavaScript. Dalam dw, anda boleh menetapkan id untuk kawalan borang dalam panel sifat. Dalam contoh ini, kami menetapkan id kepada "e-mel" untuk kotak input e-mel.

Seterusnya, kita perlu menentukan fungsi dalam kod JavaScript untuk melakukan pengesahan e-mel. Kod tersebut dilaksanakan seperti berikut:

function validateEmail() {
  var email = document.getElementById("email").value;
  var emailPattern = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;

  if (!emailPattern.test(email)) {
    alert("请输入有效的邮箱地址！");
    return false;
  }

  return true;
}

Pertama, kami mentakrifkan "e-mel" pembolehubah untuk menyimpan alamat e-mel yang dimasukkan oleh pengguna. Seterusnya, kami menentukan ungkapan biasa untuk memadankan alamat e-mel. Ungkapan biasa ini sepadan dengan format alamat e-mel yang paling biasa.

Kemudian, kami menggunakan kaedah test() untuk menyemak sama ada alamat e-mel yang dimasukkan oleh pengguna sepadan dengan ungkapan biasa. Jika ia tidak sepadan, kotak amaran akan muncul untuk menggesa pengguna memasukkan alamat yang sah dan mengembalikan palsu. Jika tidak, kembali benar.

Akhir sekali, kita perlu mengikat fungsi pada acara serah borang untuk mengesahkan apabila pengguna mengklik butang hantar. Dalam dw, anda boleh menetapkan acara serahan untuk kawalan borang dalam panel sifat.

Kod tersebut dilaksanakan seperti berikut:

<form onsubmit="return validateEmail()">
  // 表单控件
  <input type="email" id="email" name="email" required>
  
  // 提交按钮
  <input type="submit" value="提交">
</form>

Tentukan acara onsubmit dalam elemen borang dan ikatkannya pada fungsi pengesahan yang baru ditakrifkan. Apabila pengguna mengklik butang hantar, borang mengesahkan dan menyerahkan data secara automatik.

2. Melaksanakan pengesahan kata laluan

Dalam borang log masuk, pengguna juga perlu memasukkan kata laluan mereka sendiri, jadi kami juga perlu mengesahkan kata laluan yang dimasukkan oleh pengguna.

Keperluan pengesahan kata laluan biasanya termasuk sekatan panjang kata laluan, sekatan kerumitan kata laluan, dsb. Dalam artikel ini, kami hanya mengehadkan panjang kata laluan, yang mesti antara 6 dan 20 aksara.

Pertama, kita perlu menentukan id untuk kotak input kata laluan untuk beroperasi dalam JavaScript. Dalam dw, anda boleh menetapkan id untuk kawalan borang dalam panel sifat. Dalam contoh ini, kami menetapkan id untuk kotak input kata laluan kepada "kata laluan".

Seterusnya, kita perlu menentukan fungsi dalam kod JavaScript untuk pengesahan kata laluan. Kod tersebut dilaksanakan seperti berikut:

function validatePassword() {
  var password = document.getElementById("password").value;

  if (password.length < 6 || password.length > 20) {
    alert("密码长度必须在6到20个字符之间！");
    return false;
  }

  return true;
}

Pertama, kami mentakrifkan "kata laluan" pembolehubah untuk menyimpan kata laluan yang dimasukkan oleh pengguna. Seterusnya, kami menentukan sama ada panjang kata laluan adalah antara 6 dan 20 aksara. Jika ia tidak sepadan, kotak amaran akan muncul untuk menggesa pengguna memasukkan kata laluan yang sah dan mengembalikan palsu. Jika tidak, kembali benar.

Akhir sekali, kita perlu mengikat fungsi pada acara serah borang untuk mengesahkan apabila pengguna mengklik butang hantar. Dalam dw, anda boleh menetapkan acara serahan untuk kawalan borang dalam panel sifat.

Kod tersebut dilaksanakan seperti berikut:

<form onsubmit="return validateEmail() && validatePassword()">
  // 表单控件
  <input type="email" id="email" name="email" required>
  <input type="password" id="password" name="password" required>
  
  // 提交按钮
  <input type="submit" value="提交">
</form>

Tentukan acara onsubmit dalam elemen borang dan ikatkannya pada fungsi pengesahan yang baru ditakrifkan. Di sini, kami menggabungkan fungsi pengesahan e-mel dan fungsi pengesahan kata laluan menggunakan pengendali "&&". Penyerahan data hanya dibenarkan apabila nilai pulangan kedua-dua fungsi adalah benar.

Pada ketika ini, proses melaksanakan pengesahan borang JavaScript dalam dw telah tamat. Apabila data yang dimasukkan oleh pengguna tidak memenuhi keperluan, kotak amaran akan muncul untuk mengingatkan pengguna dan menghalang penyerahan borang. Dengan cara ini, kami boleh melindungi keselamatan data pengguna dengan lebih baik dan memberikan pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci dw melaksanakan pengesahan borang javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!