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

利用jquery实现表单验证

2013-04-16 20:48 274 查看

<html>

<head>

<meta charset="utf-8" />

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

<script type="text/javascript">

$(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 errMsg = "<span class='formtip'>用户名至少是6位</span>";

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

     }else{

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

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

      }

    }

  //判断一下如果是email的话，应该按照email 的规则去验证

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

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

     //按照正则去验证

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

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

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

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

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

      }else{

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

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

       }



    }

  });

});

</script>

</head>

<body>

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

<div class="int">

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

</div>

<div class="int">

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

</div>

</form>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航