您的位置：首页 > Web前端 > JQuery

jquery实现简单的表单验证

2013-04-23 22:08 435 查看

<html>

<head>

<meta charset="utf-8">

<style>

</style>

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

<script>

/*

$(function(){

$(":input.required").each(function(){

       var $required=$("<strong>*</strong>");

       $(this).parent().append($required);

});

$(":input.required").blur(function(){

       if($(this).is("#username")){

            $(".formtip").remove();

               if(this.value==""||this.value.length<6){

       var span="<span class='formtip'>用户名需六位以上</span>";

    $(this).parent().append(span);

      }else{

        var span1="<span class='formtip'>用户名可以使用</span>";

    $(this).parent().append(span1);

      }

    }

      if($(this).is("#email")){

   $(".emailtip").remove();

   var reg = /^\w{1,}@\w+\.\w+$/;

   var $email = $("#email").val();

              if(!reg.test($email)){

       var span="<span class='emailtip'>邮箱不合法</span>";

    $(this).parent().append(span);

     }else{

       var span1="<span class='emailtip'>邮箱可以使用</span>";

    $(this).parent().append(span1);

     }

   }

});

});

*/

$(function(){

   $(":input.required").each(function(){

         var $li = $("<strong>*</strong>")

   $(this).parent().append($li);

   });

   $(":input.required").blur(function(){

        $("span.formtip").remove();

       if($(this).is("#username")){

             if(this.value==""||this.value.length<6){

     var $span=$("<span class='formtip'>用户名需六位以上</span>");

     $(this).parent().append($span);

    }else{

      var $span=$("<span class='formtip'>用户名可以使用</span>");

      $(this).parent().append($span);

    }

    }

    if($(this).is("#email")){

       $("span.emailtip").remove();

        var reg =/^\w{1,}@\w+\.\w+$/;

     var $email=$("#email").val();

           if(!reg.test($email)){

        var $span=$("<span class='emailtip'>邮箱不合法</span>");

     $(this).parent().append($span);

     }else{

       var $span=$("<span class='emailtip'>邮箱可以使用</span>");

     $(this).parent().append($span);



     }

    }

   });

});

</script>

<body>

<form action="#" method="post">

<div class="int">

   用户名： <input type="text" id="username" class="required"/>

</div>

<div class="int">

    邮箱：<input type="text" id="email" class="required">

</div>

<div class="int">

    用户资料：<input type="text" id="ziliao" class="required">

</div>

</form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航