jq-表单验证

最新推荐文章于 2024-06-29 14:47:07 发布
夏末丶拾忆
最新推荐文章于 2024-06-29 14:47:07 发布
阅读量1.3k
点赞数
分类专栏： jq
本文链接：https://blog.csdn.net/cq_xiaoma/article/details/8952111
版权
jq 专栏收录该内容
8 篇文章 0 订阅
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <title>表单</title>
    <style type="text/css">
  .focus{border:1px solid #f00; background:#fcc;}
  #comment{}
  .bigger,.smaller{cursor:pointer; background:#ccc;}
  .onError{color:#F00;}
  .onSuccess{color:#0C3;}
  .high{color:#f00;}
  .formtips{ background:#ccc; padding-left:20px;}
    </style>
    <script type="text/javascript">
  $(function(){
    //文本框获得焦点
    $(":input").focus(function(){
      $(this).addClass("focus");
     }).blur(function(){
      $(this).removeClass("focus"); 
     });
    
    
    //改变文本域
    var $comment = $("#comment");
    $(".bigger").click(function(){
      if(!$comment.is(":animated"))
      {
       if($comment.height()<500)
       {
        $comment.animate({height:"+=50"},400);
       } 
      }
     });
    $(".smaller").click(function(){
      if(!$comment.is(":animated"))
      {
       if($comment.width()>50)
       {
        $comment.animate({width:"-=50"},400);
       }
      }
     });
    
    
    //复选框.按钮
    $("#checkedAll").click(function(){
      $("[name=items]:checkbox").attr("checked",true);
    });
    $("#checkedNo").click(function(){
      $("[name=items]:checkbox").attr("checked",false);
    });
    $("#checkedRev").click(function(){
      $("[name=items]:checkbox").each(function(){
        $(this).attr("checked",!$(this).attr("checked"));
       });
    });
    $("#send").click(function(){
      var str = "你选中的是：\r\n";
      $('[name=items]:checkbox:checked').each(function() {
                            str += $(this).val()+"\r\n";
                        });
      alert(str);
     }); 
    //复选框.复选框  
    $("#checkedAll2").click(function(){
      //1.
      //if(this.checked)
      //{
       //$("[name=items]:checkbox").attr("checked",true);
       //}
      //else
      //{
       //$("[name=items]:checkbox").attr("checked",false);
       //}
      //2.
      $("[name=items]:checkbox").attr("checked",this.checked);
     });
    //复选框.复选框 当其中一个没选择应该取消全选
    $("[name=items]:checkbox").click(function(){
      var flag = true;
      $("[name=items]:checkbox").each(function() {
                            if(!this.checked)
       {
        flag = false;
        }
                        });
      $("#checkedAll2").attr("checked",flag);;
     });
     
     
    //下拉列表框
    $("#add").click(function(){
     var $options = $("#select1 option:selected");
     //1.
     //var $remove = $options.remove();
     //$remove.appendTo("#select2");
     $options.appendTo("#select2");
     });
    $("#add_all").click(function(){
      $("#select1 option").appendTo($("#select2"));
     });
    $("#select1").dblclick(function(){
      $("option:selected",this).appendTo("#select2");
     });
    $("#remove").click(function(){
     $("#select2 option:selected").appendTo("#select1");
     });
    $("#remove_all").click(function(){
      $("#select2 option").appendTo($("#select1"));
     });
    $("#select2").dblclick(function(){
      $("option:selected",this).appendTo("#select1");
     });
     
    //验证表单
    $("form :input.required").each(function() {//添加*号
                    var $required = $("<strong class='high'>*</strong>");
     $(this).parent().append($required);
     
    $("form :input").blur(function(){//表单元素失去焦点事件
      
      $(this).parent().find(".formtips").remove();
      
      if($(this).is("#usernaem")){//用户名
       if(this.value=="" || this.value.length<6){
         var errorMsg = "请输入至少6位的用户名.";
         $(this).parent().append("<span class='formtips onError'>"+errorMsg+"</span>");
        }else{
          var okMsg = "输入正确.";
          $(this).parent().append("<span class='formtips onSuccess'>"+okMsg+"</span>");
         }
       }
       
      if($(this).is("#pass")){//密码
       if(this.value=="" || $("#usernaem").val()==this.value)
       {
        var errorMsg = "用户名和密码不能相同.";
        $(this).parent().append("<span class='formtips onError'>"+errorMsg+"</span>");
        }else{
          var okMsg = "输入正确.";
          $(this).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地址.";
        $(this).parent().append("<span class='formtips onError'>"+errorMsg+"</span>");
        }else{
          var okMsg = "输入正确.";
          $(this).parent().append("<span class='formtips onSuccess'>"+okMsg+"</span>");
         }
      }
     });
                }).keyup(function(){
      $(this).triggerHandler("blur");
     }).focus(function(){
       $(this).triggerHandler("blur");
      });
    
    $("#btnSubmit").click(function(){//提交
      $("form .required:input").trigger('blur');
      var numError = $("form .onError").length;
      if(numError){
       return false;
      }
      alert("注册成功，密码已发到你的邮箱，请查收.");
     });
   });
 </script>
</head>

<body>
 <form action="#" method="post" id="regForm">
     <fieldset>
         <legend>个人基本信息</legend>
            <div class="int">
             <label for="username">名称：</label>
                <input id="usernaem" type="text" class="required"/>
            </div>
            <div class="int">
             <label for="pass">密码：</label>
                <input id="pass" type="password" class="required"/>
            </div>
            <div class="int">
             <label for="email">邮箱：</label>
                <input id="email" type="text" class="required"/>
            </div>
            <div class="int">
             <label for="personinfo">个人资料：</label>
                <input type="text" id="personinfo"></input>
            </div>
            <div class="sub">
             <input type="submit" value="提交" id="btnSubmit" />
                <input type="reset" id="btnReset" />
            </div>
  </fieldset>
    </form>
    <br /><br /><br />
    <form>
     <div class="msg">
         <div class="msg_caption">
             <span class="bigger">放大</span>
                <span class="smaller">缩小</span>
         </div>
            <div>
             <textarea id="comment" rows="8" cols="20">
                 文字
                </textarea>
            </div>
        </div>
    </form>
    <br /><br /><br />
    <form>
  你爱好的运动是？
        <input type="checkbox" id="checkedAll2" />全选/全不选
        <br />
        <input type="checkbox" name="items" value="足球" >足球
        <input type="checkbox" name="items" value="足球1" >足球1
        <input type="checkbox" name="items" value="足球2" >足球2
        <input type="checkbox" name="items" value="足球3" >足球3
        <input type="checkbox" name="items" value="足球4" >足球4
        <br />
        <input type="button" id="checkedAll" value="全选" />
        <input type="button" id="checkedNo" value="全不选" />
        <input type="button" id="checkedRev" value="反选" />
        <input type="button" id="send" value="提交" />
    </form>
    <br /><br /><br />
    <form>
    <div class="centent">
     <select multiple id="select1" style="width:100px;height:160px; float:left;">
         <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
            <option value="5">选项5</option>
            <option value="6">选项6</option>
            <option value="7">选项7</option>
            <option value="8">选项8</option>
        </select>
        <div style="float:left; margin-left:10px; margin-right:10px;">
         <br />
         <span id="add" style="cursor:pointer; background:#CCC;">>|</span>
            <br /><br />
            <span id="add_all"  style="cursor:pointer;background:#CCC;">>></span>
            <br /><br />
         <span id="remove"  style="cursor:pointer;background:#CCC;">|<</span>
            <br /><br />
         <span id="remove_all"  style="cursor:pointer;background:#CCC;"><<</span>            
        </div>
        <select multiple="multiple" id="select2" style="width:100px;height:160px; float:left;">
        </select>
 </div>
    </form>
</body>
</html>