jquery表单验证

jquery实现简单的表单验证,jquery表单验证

 jquery怎样实现轻巧的表单验证,我们先跟大家分享一下完毕思路。

大约思路:
先为每一个required增添必填的标识,用each()方法来兑现。
在each(卡塔尔(قطر‎方法中第后生可畏成立三个成分,下一场通过append()方法将创制的因素参预到父成分前面。
那之中的this用的很精华,每三回的this都对应着相应的input成分,然后拿走相应的父成分。
然后为input要素增加失去主旨事件。然后开展客商名、邮件的辨证。
此地用了叁个判断is(),若是是客户名,做相应的管理,如若是邮件做相应的印证。
在jQuery框架中,也足以适用的时断时续生机勃勃写原汁原味的javascript代码。比方验证客商名中就有this.value,和this.value.length。对剧情张开判断。
然后开展的是邮件的辨证,用到了正则表明式
然后为input成分增添keyup事件focus事件,就是在keyup时也要做一下表明,调用blur事件就能够了。用triggerHandler(卡塔尔(قطر‎触发器,触发相应的风浪。
聊到底交给表单时做联合验证,做好全部与细节的拍卖。
假若是必填的,则加红星标志

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(''+errorMsg+'');
     }else{
      var okMsg = '输入正确.';
      $parent.append(''+okMsg+'');
     }
    }
    //验证邮件
    if( $(this).is('#email') ){
    if( this.value=="" || ( this.value!="" && !/[email protected]+.[a-zA-Z]{2,4}$/.test(this.value) ) ){
      var errorMsg = '请输入正确的E-Mail地址.';
      $parent.append(''+errorMsg+'');
    }else{
      var okMsg = '输入正确.';
      $parent.append(''+okMsg+'');
    }
    }
  }).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>

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>

以上正是jquery完成简单的表单验证的机要代码,希望对大家的上学抱有利于。

jquery如何达成简单的表单验证,大家先跟我们享用一下降到实处思路。 大概思路:
先为每叁个required添…

发表评论

电子邮件地址不会被公开。 必填项已用*标注