Bincangkan cara menggunakan JavaScript untuk mengesahkan maklumat pendaftaran

Dengan perkembangan Internet, pendaftaran telah menjadi satu tugas yang mesti diselesaikan oleh ramai orang. Sudah menjadi perkara biasa untuk mendaftar dengan tapak web dan aplikasi, dan proses pendaftaran ini memerlukan pengguna mengisi banyak maklumat peribadi, seperti nama pengguna, kata laluan, alamat e-mel, dsb. Untuk memastikan kebolehpercayaan dan keselamatan maklumat ini, kami perlu mengesahkan maklumat pendaftaran. Dalam pembangunan web, pengesahan JavaScript digunakan secara meluas. Dalam artikel ini, kami akan membincangkan cara menggunakan JavaScript untuk mengesahkan maklumat pendaftaran dan menambah beberapa ciri khas.

Secara umumnya, proses pengesahan bentuk bahagian hadapan dicetuskan apabila ia mendapat fokus dan hilang fokus. Dengan menggunakan JavaScript, kami boleh memaparkan mesej segera apabila fokus diperoleh dan melakukan pengesahan yang sepadan apabila fokus hilang.

Pertama, dalam penanda HTML, kita perlu mencipta borang yang mengandungi elemen borang. Elemen borang hendaklah mengandungi medan input dan butang hantar. Dalam contoh ini, kami akan menggunakan borang pendaftaran mudah sebagai contoh.

<form name="registerForm" onsubmit="return validateForm()" action="/submit-form" method="POST">
    <label>用户名:</label><input type="text" name="userName" required /><br />
    <label>密码:</label><input type="password" name="password" required /><br />
    <label>确认密码:</label><input type="password" name="rePassword" required /><br />
    <label>电子邮件:</label><input type="email" name="email" required /><br />
    <button type="submit">注册</button>
</form>

Kita boleh melihat beberapa atribut baharu dalam elemen bentuk, seperti "diperlukan" dan "serah diserahkan". Antaranya, "required" bermaksud kotak input mesti diisi sebelum borang boleh dihantar, dan "onsubmit" bermaksud fungsi JavaScript yang akan dilaksanakan sebelum menyerahkan borang.

Seterusnya, kita perlu melaksanakan fungsi JavaScript untuk mengesahkan data borang. Dalam contoh ini, kami akan melaksanakan fungsi yang dipanggil validateForm(). Fungsi ini akan mengambil data yang dimasukkan dalam borang dan melakukan beberapa pengesahan.

function validateForm() {
  // Get the input data
  var username = document.forms["registerForm"]["userName"].value;
  var password = document.forms["registerForm"]["password"].value;
  var repassword = document.forms["registerForm"]["rePassword"].value;
  var email = document.forms["registerForm"]["email"].value;

  // Check username
  if (username == "") {
    alert("用户名不能为空！");
    document.forms["registerForm"]["userName"].focus();
    return false;
  }

  // Check password
  if (password == "") {
    alert("密码不能为空！");
    document.forms["registerForm"]["password"].focus();
    return false;
  }

  // Check confirm password
  if (repassword == "") {
    alert("确认密码不能为空！");
    document.forms["registerForm"]["rePassword"].focus();
    return false;
  } else {
    if (repassword != password) {
      alert("两次密码不匹配！");
      document.forms["registerForm"]["password"].value = "";
      document.forms["registerForm"]["rePassword"].value = "";
      document.forms["registerForm"]["password"].focus();
      return false;
    }
  }

  // Check email
  var emailReg = /^([\w-]+\.)*?[\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$/;
  if (email == "") {
    alert("电子邮件不能为空！");
    document.forms["registerForm"]["email"].focus();
    return false;
  } else if (!emailReg.test(email)) {
    alert("电子邮件格式不正确！");
    document.forms["registerForm"]["email"].value = "";
    document.forms["registerForm"]["email"].focus();
    return false;
  }

  // If all the data is correct, return true
  return true;
}

Dalam fungsi ini, kami menggunakan beberapa syarat pengesahan mudah untuk menyemak ketepatan data borang. Contohnya, semak sama ada nama pengguna kosong, semak sama ada kata laluan dan sahkan kata laluan adalah sama, semak sama ada e-mel berada dalam format yang betul, dsb. Jika data input tidak memenuhi keperluan, mesej amaran akan muncul dan palsu akan dikembalikan untuk mengelakkan penyerahan borang. Mengembalikan benar jika semua data memenuhi keperluan.

Seterusnya, kita perlu menambah fungsi JS untuk melaksanakan operasi yang sepadan pada kotak input yang mendapat fokus dan kehilangan fokus.

// Add onfocus event
document.getElementsByName("userName")[0].onfocus = function() {
  document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "请输入用户名";
};

document.getElementsByName("password")[0].onfocus = function() {
  document.getElementsByName("password")[0].nextElementSibling.innerHTML = "请输入密码";
};

document.getElementsByName("rePassword")[0].onfocus = function() {
  document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "请再次输入密码";
};

document.getElementsByName("email")[0].onfocus = function() {
  document.getElementsByName("email")[0].nextElementSibling.innerHTML = "请输入电子邮件地址";
};

// Add onblur event
document.getElementsByName("userName")[0].onblur = function() {
  if (document.getElementsByName("userName")[0].value == "") {
    document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "用户名不能为空！";
  } else {
    document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "";
  }
};

document.getElementsByName("password")[0].onblur = function() {
  if (document.getElementsByName("password")[0].value == "") {
    document.getElementsByName("password")[0].nextElementSibling.innerHTML = "密码不能为空！";
  } else {
    document.getElementsByName("password")[0].nextElementSibling.innerHTML = "";
  }
};

document.getElementsByName("rePassword")[0].onblur = function() {
  if (document.getElementsByName("rePassword")[0].value == "") {
    document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "确认密码不能为空！";
  } else if (document.getElementsByName("rePassword")[0].value != document.getElementsByName("password")[0].value) {
    document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "两次密码不匹配！";
  } else {
    document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "";
  }
};

document.getElementsByName("email")[0].onblur = function() {
  var email = document.getElementsByName("email")[0].value;
  var emailReg = /^([\w-]+\.)*?[\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$/;

  if (email == "") {
    document.getElementsByName("email")[0].nextElementSibling.innerHTML = "电子邮件不能为空！";
  } else if (!emailReg.test(email)) {
    document.getElementsByName("email")[0].nextElementSibling.innerHTML = "电子邮件格式不正确！";
  } else {
    document.getElementsByName("email")[0].nextElementSibling.innerHTML = "";
  }
};

Dalam kod ini, kami telah menambah pengendali acara untuk setiap medan input. Apabila fokus diperoleh, mesej segera dipaparkan selepas fokus hilang, hasil pengesahan dipaparkan. Contohnya, apabila memasukkan nama pengguna, "Sila masukkan nama pengguna" akan dipaparkan di sebelah kotak teks, dan mesej ralat tertentu akan dipaparkan apabila input tidak betul.

Akhir sekali, kita boleh meletakkan kod ini bersama-sama untuk membentuk contoh lengkap:

<form name="registerForm" onsubmit="return validateForm()" action="/submit-form" method="POST">
    <label>用户名:</label><input type="text" name="userName" required /><span></span><br />
    <label>密码:</label><input type="password" name="password" required /><span></span><br />
    <label>确认密码:</label><input type="password" name="rePassword" required /><span></span><br />
    <label>电子邮件:</label><input type="email" name="email" required /><span></span><br />
    <button type="submit">注册</button>
</form>

<script>
  // Add onfocus event
  document.getElementsByName("userName")[0].onfocus = function() {
    document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "请输入用户名";
  };

  document.getElementsByName("password")[0].onfocus = function() {
    document.getElementsByName("password")[0].nextElementSibling.innerHTML = "请输入密码";
  };

  document.getElementsByName("rePassword")[0].onfocus = function() {
    document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "请再次输入密码";
  };

  document.getElementsByName("email")[0].onfocus = function() {
    document.getElementsByName("email")[0].nextElementSibling.innerHTML = "请输入电子邮件地址";
  };

  // Add onblur event
  document.getElementsByName("userName")[0].onblur = function() {
    if (document.getElementsByName("userName")[0].value == "") {
      document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "用户名不能为空！";
    } else {
      document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "";
    }
  };

  document.getElementsByName("password")[0].onblur = function() {
    if (document.getElementsByName("password")[0].value == "") {
      document.getElementsByName("password")[0].nextElementSibling.innerHTML = "密码不能为空！";
    } else {
      document.getElementsByName("password")[0].nextElementSibling.innerHTML = "";
    }
  };

  document.getElementsByName("rePassword")[0].onblur = function() {
    if (document.getElementsByName("rePassword")[0].value == "") {
      document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "确认密码不能为空！";
    } else if (document.getElementsByName("rePassword")[0].value != document.getElementsByName("password")[0].value) {
      document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "两次密码不匹配！";
    } else {
      document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "";
    }
  };

  document.getElementsByName("email")[0].onblur = function() {
    var email = document.getElementsByName("email")[0].value;
    var emailReg = /^([\w-]+\.)*?[\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$/;

    if (email == "") {
      document.getElementsByName("email")[0].nextElementSibling.innerHTML = "电子邮件不能为空！";
    } else if (!emailReg.test(email)) {
      document.getElementsByName("email")[0].nextElementSibling.innerHTML = "电子邮件格式不正确！";
    } else {
      document.getElementsByName("email")[0].nextElementSibling.innerHTML = "";
    }
  };

  function validateForm() {
    // Get the input data
    var username = document.forms["registerForm"]["userName"].value;
    var password = document.forms["registerForm"]["password"].value;
    var repassword = document.forms["registerForm"]["rePassword"].value;
    var email = document.forms["registerForm"]["email"].value;

    // Check username
    if (username == "") {
      alert("用户名不能为空！");
      document.forms["registerForm"]["userName"].focus();
      return false;
    }

    // Check password
    if (password == "") {
      alert("密码不能为空！");
      document.forms["registerForm"]["password"].focus();
      return false;
    }

    // Check confirm password
    if (repassword == "") {
      alert("确认密码不能为空！");
      document.forms["registerForm"]["rePassword"].focus();
      return false;
    } else {
      if (repassword != password) {
        alert("两次密码不匹配！");
        document.forms["registerForm"]["password"].value = "";
        document.forms["registerForm"]["rePassword"].value = "";
        document.forms["registerForm"]["password"].focus();
        return false;
      }
    }

    // Check email
    var emailReg = /^([\w-]+\.)*?[\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$/;
    if (email == "") {
      alert("电子邮件不能为空！");
      document.forms["registerForm"]["email"].focus();
      return false;
    } else if (!emailReg.test(email)) {
      alert("电子邮件格式不正确！");
      document.forms["registerForm"]["email"].value = "";
      document.forms["registerForm"]["email"].focus();
      return false;
    }

    // If all the data is correct, return true
    return true;
  }
</script>

Di atas ialah proses menggunakan JavaScript untuk mengesahkan maklumat pendaftaran. Melalui contoh ini, kita dapat melihat bahawa pengesahan bahagian hadapan boleh meningkatkan pengalaman pengguna dan keselamatan data dengan banyak. Oleh itu, dalam pembangunan web, pengesahan borang hadapan dan pengesahan data hujung belakang berjalan seiring untuk mencapai sistem pengesahan yang lengkap.

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