cari

Rumah >hujung hadapan web >tutorial js >jquery melaksanakan validation_jquery borang mudah

jquery melaksanakan validation_jquery borang mudah

WBOY
WBOYasal
2016-05-16 15:31:47919semak imbas

Bagaimana untuk melaksanakan pengesahan borang mudah dalam jquery, mari kami berkongsi dengan anda idea pelaksanaan dahulu.

Idea umum:
Mula-mula tambah teg yang diperlukan untuk setiap yang diperlukan, menggunakan kaedah setiap() untuk melaksanakannya.
Dalam setiap kaedah(), mula-mula buat elemen dengan , dan kemudian tambah elemen yang dicipta ke bahagian belakang elemen induk melalui kaedah tambah() .
ini di sini sangat penting Setiap kali ini sepadan dengan elemen input yang sepadan, dan kemudian elemen induk yang sepadan diperoleh.
Kemudian tambahkan acara fokus yang hilang untuk elemen input. Kemudian sahkan nama pengguna dan e-mel.
Di sini digunakan untuk menilai is() Jika ialah nama pengguna, lakukan pemprosesan yang sepadan. Jika ia adalah e-mel, lakukan pengesahan yang sepadan.
Dalam rangka kerja jQuery, anda juga boleh menyelitkan kod javascript asal dengan sewajarnya. Contohnya, nama pengguna pengesahan mengandungi this.value, dan this.value.length. Nilai kandungan.
Kemudian pengesahan e-mel telah dijalankan, menggunakan ungkapan biasa.
Kemudian tambahkan acara keyup dan acara fokus pada elemen input Walaupun semasa keyup, anda perlu mengesahkannya dengan memanggil acara kabur . Gunakan triggerHandler() trigger untuk mencetuskan acara yang sepadan.
Apabila menyerahkan borang pada penghujung, lakukan pengesahan bersatu dan kendalikan pemprosesan keseluruhan dan terperinci.
Jika diperlukan, tambahkan tanda bintang merah.

Bahagian jQuery: 

<script type="text/javascript">
//<![CDATA[
$(function(){  
  $("form :input.required").each(function(){
   var $required = $("<strong class='high'> *</strong>"); //创建元素
   $(this).parent().append($required); //然后将它追加到文档中
  });
   //文本框失去焦点后
  $('form :input').blur(function(){
    var $parent = $(this).parent();
    $parent.find(".formtips").remove();
    //验证用户名
    if( $(this).is('#username') ){
     if( this.value=="" || this.value.length < 6 ){
      var errorMsg = '请输入至少6位的用户名.';
      $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
     }else{
      var okMsg = '输入正确.';
      $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
     }
    }
    //验证邮件
    if( $(this).is('#email') ){
    if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
      var errorMsg = '请输入正确的E-Mail地址.';
      $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
    }else{
      var okMsg = '输入正确.';
      $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
    }
    }
  }).keyup(function(){
   $(this).triggerHandler("blur");
  }).focus(function(){
    $(this).triggerHandler("blur");
  });//end blur

  
  //提交，最终验证。
   $('#send').click(function(){
    $("form :input.required").trigger('blur');
    var numError = $('form .onError').length;
    if(numError){
     return false;
    } 
    alert("注册成功,密码已发到你的邮箱,请查收.");
   });

  //重置
   $('#res').click(function(){
    $(".formtips").remove(); 
   });
})
//]]>
</script>

bahagian html: 

<body>

<form method="post" action="">
 <div class="int">
  <label for="username">用户名:</label>
  <!-- 为每个需要的元素添加required -->
  <input type="text" id="username" class="required" />
 </div>
 <div class="int">
  <label for="email">邮箱:</label>
  <input type="text" id="email" class="required" />
 </div>
 <div class="int">
  <label for="personinfo">个人资料:</label>
  <input type="text" id="personinfo" />
 </div>
 <div class="sub">
  <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
 </div>
</form>

</body>

Di atas adalah kod utama untuk jquery untuk melaksanakan pengesahan borang mudah saya harap ia akan membantu pembelajaran semua orang.

Kenyataan：
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 sebelumnya：Contoh fungsi operasi kuki berkapsul JS (menetapkan, membaca, memadam)_kemahiran javascriptArtikel seterusnya：Contoh fungsi operasi kuki berkapsul JS (menetapkan, membaca, memadam)_kemahiran javascript

Artikel berkaitan

Lihat lagi