Pengesahan borang fungsi JavaScript: memastikan kesahihan input pengguna

Pengesahan borang fungsi JavaScript: Pastikan kesahihan input pengguna

Apabila pengguna memasukkan data dalam borang web, kami mesti memastikan kesahihan data input ini untuk memberikan pengalaman pengguna dan keselamatan data yang baik. Pengesahan borang fungsi JavaScript ialah kaedah yang biasa digunakan yang boleh digunakan untuk mengesahkan sama ada data yang dimasukkan oleh pengguna memenuhi keperluan. Seterusnya, kami akan merangkumi beberapa kaedah pengesahan bentuk biasa dan memberikan contoh kod khusus.

1. Pengesahan bukan nol

Pengesahan bukan nol ialah fungsi pengesahan bentuk yang paling asas. Sebelum menghantar borang, kami perlu memastikan pengguna mempunyai nilai dalam kotak input yang diperlukan. Berikut ialah fungsi pengesahan bukan nol yang mudah:

function validateRequired(input){
  if(input.value == ""){
    input.classList.add("error"); // 添加错误样式
    return false;
  } else {
    input.classList.remove("error"); // 移除错误样式
    return true;
  }
}

Dalam HTML, kita boleh menggunakan acara onsubmit untuk mencetuskan pengesahan: onsubmit事件来触发验证：

<form onsubmit="return validateForm()">
  <input type="text" id="name" required>
  <button type="submit">提交</button>
</form>

2. 邮箱验证

邮箱验证是常见的表单验证功能之一。我们可以使用正则表达式来验证用户输入的邮箱地址是否符合规范：

function validateEmail(input){
  var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/; // 邮箱正则表达式
  if(!emailRegex.test(input.value)){
    input.classList.add("error");
    return false;
  } else {
    input.classList.remove("error");
    return true;
  }
}

HTML中的使用方式：

<form onsubmit="return validateForm()">
  <input type="email" id="email" required>
  <button type="submit">提交</button>
</form>

3. 密码验证

密码验证是保证用户账号安全性的重要环节。我们可以通过验证密码的长度、包含大小写字母和数字来判断密码的强度：

function validatePassword(input){
  var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,}$/; // 密码正则表达式（至少8个字符，包含大小写字母和数字）
  if(!passwordRegex.test(input.value)){
    input.classList.add("error");
    return false;
  } else {
    input.classList.remove("error");
    return true;
  }
}

HTML中的使用方式：

<form onsubmit="return validateForm()">
  <input type="password" id="password" required>
  <button type="submit">提交</button>
</form>

4. 数字验证

有时候，我们需要验证用户输入的是否为数字。可以使用内置的isNaN()

function validateNumber(input){
  if(isNaN(input.value)){
    input.classList.add("error");
    return false;
  } else {
    input.classList.remove("error");
    return true;
  }
}

Pengesahan e-mel

Pengesahan E-mel ialah salah satu fungsi pengesahan bentuk biasa. Kami boleh menggunakan ungkapan biasa untuk mengesahkan sama ada alamat e-mel yang dimasukkan oleh pengguna memenuhi spesifikasi:

<form onsubmit="return validateForm()">
  <input type="number" id="age" required>
  <button type="submit">提交</button>
</form>

🎜Digunakan dalam HTML: 🎜rrreee
🎜Pengesahan kata laluan🎜🎜🎜Pengesahan kata laluan adalah untuk memastikan keselamatan pautan penting akaun pengguna. Kami boleh menilai kekuatan kata laluan dengan mengesahkan panjangnya, termasuk huruf besar dan kecil serta nombor: 🎜rrreee🎜Penggunaan dalam HTML: 🎜rrreee
🎜Pengesahan nombor🎜🎜🎜Kadangkala, kami perlu Sahkan bahawa input pengguna ialah nombor. Anda boleh menggunakan fungsi isNaN() terbina dalam untuk pengesahan: 🎜rrreee🎜Penggunaan dalam HTML: 🎜rrreee🎜Di atas adalah beberapa kaedah pengesahan bentuk biasa, yang boleh kami gabungkan dan kembangkan mengikut keperluan sebenar . Melalui pengesahan borang fungsi JavaScript, kami dapat memastikan kesahihan data yang dimasukkan oleh pengguna dan meningkatkan pengalaman pengguna dan keselamatan data. 🎜

Atas ialah kandungan terperinci Pengesahan borang fungsi JavaScript: memastikan kesahihan input pengguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!