jq表单验证

最新推荐文章于 2024-05-23 22:33:59 发布

airccxx

最新推荐文章于 2024-05-23 22:33:59 发布

阅读量449

点赞数

分类专栏： jquery

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>案例研究</title>
<script src="jquery.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
</style>
<script>
$(function(){
    $("form :input.required").each(function(){
       var aa = "<span class='high'>*<span>";
       $(this).parent().append(aa);
   });

   $("form :input").blur(function(){
        $parent = $(this).parent();
       $parent.find("span").remove();
       //用户名
       if( $(this).is("#username") ){
            if(this.value==''|| this.value.length<6){
                var error = '请输入至少6位用户名';

               $parent.append("<span class='formtips onError'>"+error+"</span>");
           }else{
                var error = '输入正确';
               $parent.append("<span class='formtips onSuccess'>"+error+"</span>");
           }
       }
       //邮箱
       if( $(this).is("#email") ){
            if(this.value==''||(this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)) ){
                var error = '请输入正确的E-MAIL地址';
               $parent.append("<span class='formtips onError'>"+error+"</span>");
           }else{
                var error = '输入正确';
               $parent.append("<span class='formtips onSuccess'>"+error+"</span>");
           }
       }
   }).keyup(function(){
        $(this).triggerHandler("blur");
   }).focus(function(){
        $(this).triggerHandler("blur");
   });

   $("#send").click(function(){
        $("form :input").trigger("blur");
       var temp = $(".onError").length;
       if(temp > 0 ){
            return false;
       }else{
            alert("提交成功");
        }
   });

})

</script>
</head>
<body>

<form method="post" action="">
   <div class="int">
       <label for="username">用户名:</label>
       <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>
</html>