Bagaimana cara memvalidasi kredensial login di html?

Question

Elemen disajikan sebagai kontrol editor teks biasa satu baris di mana teks dikaburkan sehingga tidak dapat dibaca, biasanya dengan mengganti setiap karakter dengan simbol seperti asterisk ("*") atau titik ("•" . Karakter ini akan bervariasi tergantung pada agen pengguna dan sistem operasi

Table of Contents Show

Bagaimana cara memverifikasi detail login dalam HTML?
Bagaimana cara memvalidasi kata sandi dan mengonfirmasi kata sandi dalam HTML?
Bagaimana cara memvalidasi nama pengguna dalam HTML?
Bagaimana cara mengotentikasi nama pengguna dan kata sandi dalam HTML?

Perilaku yang tepat dari proses entri dapat bervariasi dari satu browser ke browser lainnya. Beberapa browser menampilkan karakter yang diketik sesaat sebelum mengaburkannya, sementara yang lain memungkinkan pengguna untuk mengaktifkan dan menonaktifkan tampilan teks biasa. Kedua pendekatan tersebut membantu pengguna memeriksa apakah mereka memasukkan kata sandi yang dimaksud, yang bisa sangat sulit dilakukan pada perangkat seluler

Catatan. Formulir apa pun yang melibatkan informasi sensitif seperti kata sandi (seperti formulir masuk) harus disajikan melalui HTTPS. Banyak browser sekarang menerapkan mekanisme untuk memperingatkan terhadap formulir masuk yang tidak aman;

Atribut berisi string yang nilainya adalah konten saat ini dari kontrol pengeditan teks yang digunakan untuk memasukkan kata sandi. Jika pengguna belum memasukkan apa pun, nilai ini adalah string kosong (

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

3). Jika properti ditentukan, maka kotak edit kata sandi harus berisi nilai selain string kosong agar valid

Jika atribut ditentukan, konten dari kontrol

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

1 hanya dianggap valid jika nilainya lolos validasi;

Catatan. Pengumpan baris (U+000A) dan karakter carriage return (U+000D) tidak diizinkan dalam nilai

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

1. Saat menyetel nilai kontrol kata sandi, umpan baris dan karakter carriage return dihapus dari nilainya

Selain atribut yang beroperasi pada semua elemen

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

0 terlepas dari jenisnya, input bidang kata sandi mendukung atribut berikut

Jumlah maksimum karakter (sebagai unit kode UTF-16) yang dapat dimasukkan pengguna ke dalam bidang kata sandi. Ini harus berupa nilai bilangan bulat 0 atau lebih tinggi. Jika tidak ada

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

_9 yang ditentukan, atau nilai yang tidak valid ditentukan, bidang kata sandi tidak memiliki panjang maksimum. Nilai ini juga harus lebih besar atau sama dengan nilai

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" required />
<input type="submit" value="Submit" />

0

Input akan gagal validasi kendala jika panjang teks yang dimasukkan ke dalam bidang lebih besar dari

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

9 panjang unit kode UTF-16

Jumlah minimum karakter (sebagai unit kode UTF-16) yang dapat dimasukkan pengguna ke kolom entri kata sandi. Ini harus berupa nilai bilangan bulat bukan negatif yang lebih kecil dari atau sama dengan nilai yang ditentukan oleh

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

9. Jika tidak ada

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" required />
<input type="submit" value="Submit" />

_0 yang ditentukan, atau nilai yang tidak valid ditentukan, input kata sandi tidak memiliki panjang minimum

Input akan gagal validasi kendala jika panjang teks yang dimasukkan ke dalam bidang kurang dari

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" required />
<input type="submit" value="Submit" />

0 panjang unit kode UTF-16

Atribut

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

5, bila ditentukan, adalah ekspresi reguler yang inputnya harus cocok agar nilainya lulus validasi kendala. Itu harus ekspresi reguler JavaScript yang valid, seperti yang digunakan oleh tipe

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" required />
<input type="submit" value="Submit" />

7, dan seperti yang didokumentasikan dalam panduan kami tentang ekspresi reguler; . Garis miring ke depan tidak boleh ditentukan di sekitar teks pola

Jika pola yang ditentukan tidak ditentukan atau tidak valid, tidak ada ekspresi reguler yang diterapkan dan atribut ini diabaikan sepenuhnya

Catatan. Gunakan atribut untuk menentukan teks yang akan ditampilkan sebagian besar browser sebagai tooltip untuk menjelaskan apa saja persyaratan untuk mencocokkan pola. Anda juga harus menyertakan teks penjelasan lain di dekatnya

Penggunaan pola sangat disarankan untuk input kata sandi, untuk membantu memastikan bahwa kata sandi yang valid menggunakan bermacam-macam kelas karakter dipilih dan digunakan oleh pengguna Anda. Dengan pola, Anda dapat mengamanatkan aturan kasus, mewajibkan penggunaan sejumlah digit dan/atau karakter tanda baca, dan sebagainya. Lihat bagian untuk rincian dan contoh

Atribut

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />

_0 adalah string yang memberikan petunjuk singkat kepada pengguna tentang jenis informasi apa yang diharapkan di lapangan. Itu harus berupa kata atau frasa pendek yang menunjukkan tipe data yang diharapkan, bukan pesan penjelasan. Teks tidak boleh menyertakan carriage return atau line feed

Jika konten kontrol memiliki satu arah (LTR atau RTL) tetapi perlu menampilkan placeholder dalam arah yang berlawanan, Anda dapat menggunakan karakter pemformatan algoritme dua arah Unicode untuk mengesampingkan arah dalam placeholder;

Catatan. Hindari menggunakan atribut

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />

_0 jika Anda bisa. Ini tidak berguna secara semantik seperti cara lain untuk menjelaskan formulir Anda, dan dapat menyebabkan masalah teknis yang tidak terduga dengan konten Anda. Lihat untuk informasi lebih lanjut

Atribut Boolean yang, jika ada, berarti bidang ini tidak dapat diedit oleh pengguna. Namun,

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

2-nya masih dapat diubah dari kode JavaScript yang secara langsung menetapkan nilai properti

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />

4

Catatan. Karena bidang hanya-baca tidak dapat memiliki nilai,

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

4 tidak berpengaruh pada input dengan atribut

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />

6 juga ditentukan

Atribut

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />

_7 adalah nilai numerik yang menunjukkan berapa lebar karakter yang harus diisi oleh kolom input. Nilainya harus berupa angka yang lebih besar dari nol, dan nilai defaultnya adalah 20. Karena lebar karakter bervariasi, ini mungkin tepat atau tidak tepat dan tidak boleh diandalkan;

Ini tidak membatasi jumlah karakter yang dapat dimasukkan pengguna ke dalam bidang. Itu hanya menentukan kira-kira berapa banyak yang dapat dilihat pada satu waktu. Untuk menetapkan batas atas panjang input data, gunakan atribut

Kotak input kata sandi umumnya berfungsi seperti kotak input tekstual lainnya;

Di sini kita melihat input kata sandi yang paling dasar, dengan label yang dibuat menggunakan elemen

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

0

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" />

Untuk mengizinkan pengelola kata sandi pengguna memasukkan kata sandi secara otomatis, tentukan atributnya. Untuk kata sandi, ini biasanya harus salah satu dari yang berikut

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

2

Izinkan browser atau pengelola kata sandi untuk secara otomatis mengisi bidang kata sandi. Ini tidak informatif seperti menggunakan

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

3 atau

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

4

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

5

Jangan izinkan browser atau pengelola kata sandi mengisi bidang kata sandi secara otomatis. Perhatikan bahwa beberapa perangkat lunak mengabaikan nilai ini, karena biasanya berbahaya bagi kemampuan pengguna untuk mempertahankan praktik kata sandi yang aman

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

3

Izinkan browser atau pengelola kata sandi untuk memasukkan kata sandi saat ini untuk situs tersebut. Ini memberikan lebih banyak informasi daripada

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

_2, karena ini memungkinkan browser atau pengelola kata sandi secara otomatis memasukkan kata sandi yang diketahui saat ini untuk situs di lapangan, tetapi tidak untuk menyarankan yang baru

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

4

Izinkan browser atau pengelola kata sandi untuk secara otomatis memasukkan kata sandi baru untuk situs; . Kata sandi baru dapat dibuat dengan berbagai cara, tergantung pada pengelola kata sandi yang digunakan. Itu mungkin mengisi kata sandi baru yang disarankan, atau mungkin menunjukkan kepada pengguna antarmuka untuk membuatnya

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

Untuk memberi tahu browser pengguna bahwa bidang kata sandi harus memiliki nilai yang valid sebelum formulir dapat dikirimkan, tentukan atribut Boolean

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" required />
<input type="submit" value="Submit" />

Jika aturan sintaks kata sandi yang direkomendasikan (atau wajib) Anda akan mendapat manfaat dari antarmuka entri teks alternatif daripada keyboard standar, Anda dapat menggunakan atribut untuk meminta yang spesifik. Kasus penggunaan yang paling jelas untuk ini adalah jika kata sandi harus numerik (seperti PIN). Perangkat seluler dengan keyboard virtual, misalnya, dapat memilih untuk beralih ke tata letak keypad numerik alih-alih keyboard lengkap, untuk memudahkan memasukkan kata sandi. Jika PIN untuk sekali pakai, setel atribut ke

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

5 atau

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Select All</button>

3 untuk menunjukkan bahwa PIN tidak disimpan

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />

Seperti biasa, Anda dapat menggunakan atribut dan untuk menetapkan panjang kata sandi minimum dan maksimum yang dapat diterima. Contoh ini memperluas contoh sebelumnya dengan menetapkan bahwa PIN pengguna harus minimal empat dan tidak lebih dari delapan digit. Atribut ini digunakan untuk memastikan bahwa kontrol entri kata sandi memiliki lebar delapan karakter

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

Seperti kontrol entri tekstual lainnya, Anda dapat menggunakan metode

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Select All</button>

7 untuk memilih semua teks di bidang kata sandi

HTML

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Select All</button>

JavaScript

document.getElementById("selectAll").onclick = () => {
  document.getElementById("userPassword").select();
}

Hasil

Anda juga dapat menggunakan

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Select All</button>

8 dan

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Select All</button>

9 untuk mendapatkan (atau menyetel) rentang karakter dalam kontrol yang saat ini dipilih, dan

document.getElementById("selectAll").onclick = () => {
  document.getElementById("userPassword").select();
}

0 untuk mengetahui di arah mana pemilihan terjadi (atau akan diperluas, bergantung pada platform Anda; lihat dokumentasinya untuk mengetahui . Namun, mengingat teksnya dikaburkan, kegunaannya agak terbatas

Jika aplikasi Anda memiliki batasan kumpulan karakter atau persyaratan lain untuk konten sebenarnya dari kata sandi yang dimasukkan, Anda dapat menggunakan atribut tersebut untuk membuat ekspresi reguler yang akan digunakan untuk secara otomatis memastikan bahwa kata sandi Anda memenuhi persyaratan tersebut

Dalam contoh ini, hanya nilai yang terdiri dari setidaknya empat dan tidak lebih dari delapan digit heksadesimal yang valid

<label for="hexId">Hex ID: </label>
<input
  id="hexId"
  type="password"
  pattern="[0-9a-fA-F]{4,8}"
  title="Enter an ID consisting of 4-8 hexadecimal digits"
  autocomplete="new-password" />

Contoh ini hanya menerima input yang cocok dengan format untuk a. Nomor ini, yang digunakan untuk tujuan pajak dan identifikasi di AS, berbentuk "123-45-6789". Berbagai aturan untuk nilai apa yang diizinkan di setiap grup juga ada

HTML

<label for="ssn">SSN:</label>
<input
  type="password"
  id="ssn"
  inputmode="numeric"
  minlength="9"
  maxlength="12"
  pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
  required
  autocomplete="off" />
<br />
<label for="ssn">Value:</label>
<span id="current"></span>

Ini menggunakan yang membatasi nilai yang dimasukkan ke string yang mewakili nomor Jaminan Sosial resmi. Jelas, regexp ini tidak menjamin SSN yang valid (karena kami tidak memiliki akses ke database Administrasi Jaminan Sosial), tetapi memastikan nomornya bisa satu; . Selain itu, ini memungkinkan tiga kelompok digit dipisahkan oleh spasi, tanda hubung ("-"), atau tidak sama sekali

Diatur ke

document.getElementById("selectAll").onclick = () => {
  document.getElementById("userPassword").select();
}

_4 untuk mendorong perangkat dengan keyboard virtual untuk beralih ke tata letak keypad numerik agar lebih mudah masuk. Atribut dan masing-masing diatur ke 9 dan 12, untuk mensyaratkan bahwa nilainya minimal sembilan dan tidak lebih dari 12 karakter (yang pertama tanpa memisahkan karakter antara kelompok digit dan yang terakhir dengannya). Atribut digunakan untuk menunjukkan bahwa kontrol ini harus memiliki nilai. Akhirnya, disetel ke

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

5 untuk menghindari pengelola kata sandi dan fitur pemulihan sesi mencoba menyetel nilainya, karena ini sama sekali bukan kata sandi

JavaScript

Ini hanyalah beberapa kode sederhana untuk menampilkan layar SSN yang dimasukkan sehingga Anda dapat melihatnya. Jelas ini mengalahkan tujuan bidang kata sandi, tetapi berguna untuk bereksperimen dengan

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

5

Remember me.

Bagaimana cara memvalidasi kata sandi dan mengonfirmasi kata sandi dalam HTML?

Konfirmasi kata sandi dengan HTML5

Bagaimana cara memvalidasi nama pengguna dalam HTML?

validasi fungsi() { nama var = dokumen. getElementById("nama pengguna"). .

^ - dari awal string (atau baris dengan bendera m)

[ - mulai kelas karakter

a-z - rentang karakter dari a hingga z

\d - sama dengan 0-9 (digit apa saja)

] - tutup kelas karakter

+ satu atau lebih

$ - akhir dari string (atau baris dengan bendera m)

Bagaimana cara mengotentikasi nama pengguna dan kata sandi dalam HTML?

Skema Otentikasi . Ini juga dapat digunakan secara terprogram untuk permintaan HTTP POST. The Form authentication scheme uses a HTML web form for the user to enter their username and password credentials and HTTP Post requests to submit to the server for verification. It may also be used programmatically va HTTP POST requests.

kode html