Pengesahan borang fungsi JavaScript: memastikan kesahihan input pengguna

WBOY
Lepaskan: 2023-11-18 08:08:05
asal
571 orang telah melayarinya

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; } }
Salin selepas log masuk

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

Salin selepas log masuk
  1. 邮箱验证

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

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; } }
Salin selepas log masuk

HTML中的使用方式:

Salin selepas log masuk
  1. 密码验证

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

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; } }
Salin selepas log masuk

HTML中的使用方式:

Salin selepas log masuk
  1. 数字验证

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

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

    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:

    Salin selepas log masuk
    Digunakan dalam HTML: rrreee
      Pengesahan kata laluanPengesahan 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: rrreeePenggunaan dalam HTML: rrreee
        Pengesahan nomborKadangkala, kami perlu Sahkan bahawa input pengguna ialah nombor. Anda boleh menggunakan fungsi isNaN()terbina dalam untuk pengesahan: rrreeePenggunaan dalam HTML: rrreeeDi 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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!