Validasi Username dan Password dengan HTML5

Berbeda dengan tutorial sebelumnya validasi yang akan kita buat merupakan validasi dengan menggunakan sebuah attribute HTML yang bernama pattern. Pattern ini akan mempermudah kita dalam menentukan format apa yang harus dipenuhi ketika user menginput data. Untuk lebih jelas coba ikuti tutorial berikut.

Buatlah sebuah form login terdiri dari username dan password.

Kemudian tambahkan pada tag form event onSubmit.

onSubmit="alert('Submitted.');return false;"

Pada input username tambahkan attribute pattern untuk memberikan format minimal 8 karakter.

pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{7,20}$"

Pada input password tambahkan attribute pattern untuk memberikan format password minimal 8 karakter dan harus menggunakan format huruf besar, huruf kecil dan angka.

pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$"

Selengkapnya :

Demikian Tutorial Validasi ini. Semoga menambah pengetahuan teman-teman tentang HTML5. Sampai bertemu di tutorial berikutnya. Terimakasih.