masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > javascript kata laluan verification_javascript kemahiran

javascript kata laluan verification_javascript kemahiran

WBOY
Lepaskan： 2016-05-16 15:33:01
asal
1372 orang telah melayarinya

Artikel ini berkongsi dengan anda cara melaksanakan pengesahan kata laluan JavaScript Anda dialu-alukan untuk membacanya.

 

Kod pengesahan kata laluan javascript adalah seperti berikut

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>密码验证</title>
  <script src="js/jquery-1.11.1.js"></script>
  <script>
    $(function(){
      $(document).on('blur','input',function(){
        var $password=$('#password').val();
        var $password_again=$('#password_again').val();
          if(!$password){
            $("#password").addClass('redBorder').next('label').show().html('不能为空');;
            return false;
          }else if(!$password_again){
            $("#password_again").addClass('redBorder').next('label').show().html('不能为空');
            return false;
          }else{
            $('input').removeClass('redBorder').next('label').empty();
            if($password_again==$password){
              $("#password,#password_again").next('label').show().html('两次密码一致').addClass('valid');
            }else if($password_again!=$password){
              $("#password,#password_again").addClass('redBorder').next('label').show().html('两次密码不一致').removeClass('valid').addClass('erro');
            }
 
        } 
      })
       
    })
  </script>
  <style>
    .redBorder{
      border: 1px solid red;
    }
    .erro{
      background: url('images/unchecked.gif') no-repeat;
      padding-left: 16px;
    }
    .valid{
      background: url('images/checked.gif') no-repeat;
      width: 16px;
      height: 16px;
    }
  </style>
</head>
<body>
<div>
  <label>
    输入密码：<input type="text" placeholder="输入密码" id="password">
    <label id="password-erro" class="erro" style="display:none;"></label>
  </label>
  <br><br>
  <label>
    验证密码：<input type="text" placeholder="输入相同密码" id="password_again">
    <label id="password-erro" class="erro" style="display:none;"></label>
  </label>
  <br><br>
  <button style="margin-left:80px;">submit</button>
</div>  
</body>
</html>
Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang dalam mempelajari pengaturcaraan javascript.

Label berkaitan：
javascript验证 javascript表单验证 javascript验证数字 javascript密码
sumber：php.cn
Artikel sebelumnya：Kemahiran effect_javascript pokok responsif javascript tulen Artikel seterusnya：Penjelasan terperinci tentang penggunaan SetInterval dan setTimeout dalam kemahiran JavaScript_javascript
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
Artikel terbaru oleh pengarang
Isu terkini
Lancarkan penyemak imbas telus untuk meningkatkan pengalaman aplikasi web dan PWA [menyokong HTML statik, CSS dan JavaScript] [membenarkan pengguna melihat kertas dinding desktop dalam aplikasi web/PWA kami] Saya seorang pembangun dan pereka bentuk hadapan junior yang sedang membangunkan aplikasi ...
daripada 2024-04-05 13:50:12
0
1
1367
Hantar nilai e-mel model v kepada kaedah Hai, saya cuba menghantar model v pada input untuk mencuba dan menghantar e-mel untuk mene...
daripada 2024-04-05 10:04:40
0
1
405
Dapatkan pemberitahuan penyemak imbas daripada sesiapa sahaja kecuali pengesah semasa. pengguna Saya sedang membina aplikasi sembang dengan ReactJS dan saya sudah gila dengan masalah ini...
daripada 2024-04-04 19:01:28
0
1
362
Selepas SAPUI5 callFunction() dipanggil, Errorhandler tidak dipanggil Saya cuba mengesahkan IBAN dalam wizard dalam SAPUI5. Untuk melakukan ini, saya menggunaka...
daripada 2024-04-04 18:06:36
0
1
400
Ujian Cypress untuk memintas URL Zum Saya mempunyai kes ujian yang akhirnya mengubah hala ke pautan Zum. Saya cuba mengelakkan ...
daripada 2024-04-04 16:16:37
0
1
340
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan