Bagaimana untuk mengesahkan menggunakan JavaScript

Dalam pembangunan web, borang adalah elemen yang sangat biasa. Walau bagaimanapun, data yang dimasukkan oleh pengguna dalam borang selalunya tidak dijamin betul, jadi kami perlu melakukan beberapa pengesahan untuk memastikan kesahihan data. Sebagai bahagian penting dalam pembangunan bahagian hadapan Web, JavaScript mempunyai fungsi pengesahan yang sangat berkuasa Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mengesahkan data borang.

1. Dapatkan data borang

Untuk mengesahkan data borang, anda perlu mendapatkan data input terlebih dahulu. Dalam JavaScript, anda boleh menggunakan objek dokumen untuk mendapatkan elemen borang, seperti yang ditunjukkan di bawah:

let username = document.getElementById('username').value; // 获取用户名的值
let password = document.getElementById('password').value; // 获取密码的值

Antaranya, kaedah getElementById() boleh mendapatkan elemen yang sepadan berdasarkan atribut id elemen. Selepas memperoleh nilai elemen bentuk, kami kemudian boleh mengesahkan nilai ini.

2. Sahkan nama pengguna

Semasa mengesahkan nama pengguna, kami boleh menggunakan ungkapan biasa. Berikut ialah ungkapan biasa mudah yang boleh memadankan huruf besar dan huruf kecil, nombor dan garis bawah, dengan panjang 6 hingga 20 aksara:

let usernamePattern = /^[a-zA-Z0-9_]{6,20}$/;

Kemudian kita boleh memadankan nama pengguna yang diperolehi dengan ungkapan biasa untuk menentukan Sama ada ia memenuhi keperluan:

if (!usernamePattern.test(username)) {
  // 满足条件
} else {
  // 不满足条件
}

Dalam kod di atas, kaedah test() boleh menguji sama ada rentetan sepadan dengan ungkapan biasa tertentu Jika ia sepadan, ia mengembalikan benar, jika ia tidak sepadan, ia mengembalikan palsu.

3. Sahkan Kata Laluan

Semasa mengesahkan kata laluan, kami juga boleh menggunakan ungkapan biasa. Berikut ialah ungkapan biasa mudah yang boleh memadankan huruf besar dan huruf kecil, nombor dan aksara khas, dengan panjang 6 hingga 20 aksara:

let passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{6,20}$/;

Kemudian kita boleh memadankan kata laluan yang diperoleh dengan ungkapan biasa untuk menentukan Sama ada ia memenuhi keperluan:

if (!passwordPattern.test(password)) {
  // 满足条件
} else {
  // 不满足条件
}

Begitu juga, dalam kod di atas, kaedah test() boleh menguji sama ada rentetan sepadan dengan ungkapan biasa tertentu Jika ia sepadan, ia mengembalikan benar, jika ia tidak sepadan, ia kembali palsu.

4. Sahkan alamat e-mel

Alamat e-mel ialah elemen bentuk yang sangat biasa, jadi anda juga perlu mengesahkan alamat e-mel. Begitu juga, kita boleh menggunakan ungkapan biasa untuk pengesahan. Berikut ialah ungkapan biasa mudah yang boleh memadankan alamat e-mel yang sah:

let emailPattern = /^[a-zA-Z0-9]+([._]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([.][a-zA-Z0-9]+)+$/;

Kemudian kita boleh memadankan alamat e-mel yang diperoleh dengan ungkapan biasa untuk menentukan sama ada ia memenuhi keperluan:

if (!emailPattern.test(email)) {
  // 满足条件
} else {
  // 不满足条件
}

Begitu juga, dalam kod di atas, kaedah test() boleh menguji sama ada rentetan sepadan dengan ungkapan biasa tertentu Jika ia sepadan, ia mengembalikan benar, jika ia tidak sepadan, ia mengembalikan palsu.

5. Pengesahan nombor telefon mudah alih

Semasa mengesahkan nombor telefon mudah alih, kami juga boleh menggunakan ungkapan biasa. Berikut ialah ungkapan biasa ringkas yang boleh memadankan nombor telefon mudah alih yang sah:

let phonePattern = /^1[34578]d{9}$/;

Kemudian kita boleh memadankan nombor telefon mudah alih yang diperoleh dengan ungkapan biasa untuk menentukan sama ada ia memenuhi keperluan:

if (!phonePattern.test(phone)) {
  // 满足条件
} else {
  // 不满足条件
}

Begitu juga, dalam kod di atas, kaedah test() boleh menguji sama ada rentetan sepadan dengan ungkapan biasa tertentu Jika ia sepadan, ia mengembalikan benar, jika ia tidak sepadan, ia mengembalikan palsu.

6. Laksanakan fungsi pengesahan

Dengan menyepadukan peraturan pengesahan di atas, kami boleh melaksanakan fungsi pengesahan borang yang lengkap. Berikut ialah kod contoh mudah:

let usernamePattern = /^[a-zA-Z0-9_]{6,20}$/; // 校验用户名
let passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{6,20}$/; // 校验密码
let emailPattern = /^[a-zA-Z0-9]+([._]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([.][a-zA-Z0-9]+)+$/; // 校验邮箱地址
let phonePattern = /^1[34578]d{9}$/; // 校验手机号码

function validateForm() { // 表单校验函数
  let username = document.getElementById('username').value; // 获取用户名
  let password = document.getElementById('password').value; // 获取密码
  let email = document.getElementById('email').value; // 获取邮箱地址
  let phone = document.getElementById('phone').value; // 获取手机号码

  if (!usernamePattern.test(username)) { // 校验用户名
    alert('请填写6到20位大小写字母、数字和下划线');
    return false;
  } else if (!passwordPattern.test(password)) { // 校验密码
    alert('请填写6到20位大小写字母、数字、特殊字符');
    return false;
  } else if (!emailPattern.test(email)) { // 校验邮箱地址
    alert('请填写正确的邮箱地址');
    return false;
  } else if (!phonePattern.test(phone)) { // 校验手机号码
    alert('请填写正确的手机号码');
    return false;
  } else {
    return true;
  }
}

Dalam kod di atas, fungsi validateForm() akan dipanggil secara automatik apabila borang diserahkan untuk mengesahkan data dalam borang. Jika pengesahan gagal, fungsi akan mengembalikan palsu untuk menghalang borang daripada diserahkan, jika pengesahan lulus, fungsi akan kembali benar dan borang akan diserahkan. Pada masa yang sama, apabila pengesahan gagal, mesej gesaan yang sepadan akan muncul untuk memudahkan pengguna membuat pembetulan.

7. Ringkasan

Sebagai bahasa pembangunan bahagian hadapan web yang sangat penting, JavaScript menyediakan fungsi pengesahan yang sangat berkuasa. Dalam pembangunan borang, menggunakan JavaScript untuk pengesahan data boleh memastikan kesahihan dan ketepatan data, serta meningkatkan pengalaman pengguna dan keselamatan data. Perkara di atas memperkenalkan beberapa peraturan pengesahan dan pelaksanaan kod yang biasa digunakan, yang boleh digunakan untuk rujukan anda.

Atas ialah kandungan terperinci Bagaimana untuk mengesahkan menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!