当前位置：首页 > 资讯 > 技术文档

jquery实现简单的表单验证

时间：2022-10-04 08:42 编辑：来源：阅读：
扫一扫，手机访问

摘要：jquery实现简单的表单验证

jquery如何实现简单的表单验证，我们先跟大家分享一下实现思路。 [b]大概思路:[/b] 先为每一个required添加必填的标记，用[b]each()[/b]方法来实现。在each()方法中先是[b]创建一个元素，[/b]然后通过[b]append()方法[/b]将创建的元素加入到父元素后面。这里面的[b]this[/b]用的很精髓，每一次的this都对应着相应的input元素，然后获取相应的父元素。然后为[b]input[/b]元素添加失去焦点事件。然后进行用户名、邮件的验证。这里用了一个[b]判断is()[/b]，如果是用户名，做相应的处理，如果是邮件做相应的验证。在jQuery框架中，也可以适当的穿插一写原汁原味的javascript代码。比如验证用户名中就有[b]this.value，和this.value.length。[/b]对内容进行判断。然后进行的是邮件的验证，用到了[b]正则表达式[/b]。然后为input元素添加[b]keyup事件[/b]与[b]focus事件[/b]，就是在keyup时也要做一下验证，调用blur事件就行了。用triggerHandler()触发器，触发相应的事件。最后提交表单时做统一验证，做好整体与细节的处理。如果是必填的，则加[b]红星标识[/b]。 [b]jQuery部分：[/b]

<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>

[b]html部分： [/b]

<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实现简单的表单验证的关键代码，希望对大家的学习有所帮助。

全部评论(0)

上一篇：ajax 不错的应用
下一篇：比getjson好的底层函数是哪个有什么优点

资讯排行榜
更多>>