Memeriksa Password Strength dengan pStrength jQuery Plugin

pStrength plugin - web design - Password Strength

cara cepat di dalam web design untuk cek password strength menggunakan pStrength plugin



Memeriksa Password Strength dengan pStrength jQuery Plugin

Di dalam membuat web design, terkadang kita membuat form registrasi untuk pengunjung situs kita. Salah satu fitur di dalam form registrasi adalah password.
Salah satu yang dibutuhkan adalah password strength untuk menjamin keamanan akses yang lebih baik.

Untuk mengatasi hal itu kita bisa menggunakan pStrength jQuery Plugin.
Di dalam file HTML kita bisa memanggil file jquery tersebut yang harus dipanggil bersama dengan file jquery

<script src="jquery-1.10.2.min.js"></script>	
<script type="text/javascript" src="pStrength.jquery.js"></script>

Kemudian kita bisa memasukan perintah jquery sebagai berikut:

Baca Juga: CSS Trunk Text
$(document).ready(function(){
    
            $('#password').pStrength({
                'changeBackground': false,
                'onPasswordStrengthChanged' : function(passwordStrength, strengthPercentage) {
                    if ($(this).val()) {
                        $.fn.pStrength('changeBackground', this, passwordStrength);
                    } else {
                        $.fn.pStrength('resetStyle', this);
                    }
                    $('#' + $(this).data('display')).html('Password Strength: ' + strengthPercentage + '%');
                    
                    if(strengthPercentage < 60)
	                    	{
	                    		$('button[type=submit]').attr('disabled', 'disabled');
	    						$('form').bind('submit',function(e){e.preventDefault();});
	                    	}
	                    else
	                    	{
	                    		$('button[type=submit]').removeAttr('disabled', 'disabled');
	    						$('form').unbind('submit');
	                    	}
                },
                'onValidatePassword': function(strengthPercentage) {
                    $('#' + $(this).data('display')).html(
                        $('#' + $(this).data('display')).html() + ' Great!'
                    );
                }
            });
        });

Dari perintah di atas kita bisa melihat ada bagian:

Baca Juga: CSS Trunk Text
if(strengthPercentage < 60)
	{
		$('button[type=submit]').attr('disabled', 'disabled');
		$('form').bind('submit',function(e){e.preventDefault();});
	}
else
	{
		$('button[type=submit]').removeAttr('disabled', 'disabled');
		$('form').unbind('submit');
	}

Bagian di atas berguna untuk mencegah form dikirimkan jika Password Strength kurang dari 60.

Untuk demo lengkap bisa dicek di:

DEMO



Artikel Lainnya

Web Design Surabaya - Web Design Murah - Jasa SEO terbaik

Penggunaan Bootstrap-DateTimePicker untuk range tanggal

Halo pembaca setia artikel kami, kali ini kami sebagai Web Design Surabaya ingin memberikan tutorial mengenai penggunaan bootstrap-datetimepicker dalam memilih tanggal masuk dan tanggal keluar. Bukan hanya tanggalnya saja, tetapi juga bisa disertai d ...


Cara mempercepat loading web

Sebagai Jasa Web Design Surabaya, kami seringkali menghadapi saat load sebuah website tidak maksimal, karena harus menunggu cukup lama sampai ada content yang dimunculkan.Hal ini bisa terjadi jika halaman web kita memiliki banyak gambar, css, dan jav ...


Membuat input type untuk email di HTML

Pada umumnya kita sebagai web developer membuat input type berupa text atau password dengan kode seperti berikut: Untuk text: <input type="text" name="username" size="25" maxsize="15"> Untuk password: <input type="password" name="password" ...


Kami membuat RESPONSIVE WEB

Responsive web adalah kode program web sehingga website tetap terbaca dengan mudah di semua perangkat baik komputer, smartphone, maupun tablet, dan sangat cocok dengan syarat dari mesin pencari google

web design di bali

Foto Buat Nikah

Desain Grafis

Kontak

08113638531 / 08113865464

info@tatamedia.com

Desainer Website di Surabaya

Web Design di Bali

Kantor

Tatamedia Solusindo Surabaya

Dekkophotography Bali

Video Prewedding

Web Design

Support

Kirim permintaan anda ke

info@tatamedia.com