一个简单的表单,说说几个踩过的坑

jquery+boostrap3

CDN:

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

性别选择的checkbox特效，需要可以找我要，貌似现在上传不了

<link href="css/inserthtml.com.radios.css" rel="stylesheet" type="text/css"/>

按钮特效:

<link rel="stylesheet" href="css/button.css" />

HTML代码：

 <form action="" class = 'form-horizontal' method="post" id = 'form-table' accept-charset="utf-8" role = 'form'>
        <div class = 'container' id = 'tablecontainer'>
        <div class = 'form-group' id = 'sadminInput'>
        <div class = 'col-lg-3'>
            <label for="gm">
            <span class="glyphicon glyphicon-user"></span>超管:</label> 
            <span style = 'font-size:20px;'>
            <span class = 'saValue'>0</span>/4</span>
            <input type="text" name="gyl_personnel_name_register" id = 'gm' maxlength = '4' placeholder="请输入姓名" class="form-control">        
        </div>  
        </div>  
        <div class = 'form-group' id = 'adminInput'>
        <div class = 'col-lg-3'>
            <label for="ga">    
            <span class="glyphicon glyphicon-user"></span>管理员:</label> 
            <span style = 'font-size:20px;'>
            <span class = 'aValue'>0</span>/4</span>
            <input type = 'text' name = 'gyl_personnel_admin' id = 'ga' maxlength = '4' class = 'form-control' placeholder = '请输入管理员名称' />
        </div>  
        </div>  

        <div class = 'form-group' id = 'userInput'>
        <div class = 'col-lg-3'>
            <label for="gu">    
            <span class="glyphicon glyphicon-leaf"></span>用户:</label> 
            <span style = 'font-size:20px;'>
            <span class = 'uValue'>0</span>/4</span>
            <input type = 'text' name = 'gyl_personnel_admin' id = 'gu' maxlength = '4' class = 'form-control' placeholder = '请输入用户名称' />
        </div>  
        </div>  
        
        <div id = 'container-form'>
        <div class = 'form-group has-feedback'>
        <div class = 'col-md-3'>
       
        <label for = 'psd' >密码:</label> <span style = 'font-size:20px;'>
        <span class = 'psdVal'>0</span>/16</span>
        <!--<button type = 'button' id = 'spsd' class = 'form-control-feedback'></button>-->
        <span class="cover"></span>
        <span class="iconfont icon-guanbi-yanjing form-control-feedback" id = 'spsd'></span>
        <span class="iconfont icon-yanjing1 form-control-feedback" id = 'spsd2' ></span>
        <span class = 'scolor'></span>
        <input type = 'password' onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" name = 'gyl_admin_password' maxlength='16' id = 'psd' size = '2' class = 'form-control fc-clear' placeholder = '请输入管理员密码' >     
        </div>
        </div>

        <div id = 'container-form'>
        <div class = 'form-group has-feedback'>        
        <div class = 'col-lg-3'>
        <label for = 'repsd' >密码:</label> <span style = 'font-size:20px;'>
        <span class = 'repsdVal'>0</span>/16</span>
        <!--<button type = 'button' id = 'spsd' class = 'form-control-feedback'></button>-->
        <span class="recover"></span>
        <span class="iconfont icon-guanbi-yanjing form-control-feedback" id = 'respsd'></span>
        <span class="iconfont icon-yanjing1 form-control-feedback" id = 'respsd2' ></span>
        <input type = 'password' onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" name = 'gyl_admin_repassword' maxlength='16' id = 'repsd' class = 'form-control fc-clear' placeholder = '请再次输入管理员密码' >        
        </div>        
        </div>
        <div class = 'form-group'>
         <label for="gg" class = 'radio-inline'>性别:</label>
         <small style = 'font-size:16px;color:#999999'>打开男,关闭女</small>
        <br>
        <!-- <div class="center" style="width: 233px;"> -->           
            <input type="radio" name="gyl_personnel_gender_redister" class = 'ggMan'
            id = 'gg' value = '男' />
            <input type="radio" name="gyl_personnel_gender_redister" class = 'ggWomen' 
            value = '女' id = 'gg' checked />
          <input type="checkbox" id="checkbox-10-1" class = 'checkbox-0-'/><label for="checkbox-10-1" id = 'test'></label>
          <!-- <input type="checkbox" id="checkbox-10-2" checked /><label for="checkbox-10-2"></label> -->
      <!-- </div> --> 
        </div>  
        <div class = 'form-group'>
        <div class = 'col-lg-3'>
            <label for="ge">
            <span class = 'glyphicon glyphicon-send'></span>
            email:</label> 
            <span style = 'font-size:20px;'>
            <span class = 'eVal'>0</span>/22</span>
            <input type="email" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" name="gyl_personnel_email_register" id = 'ge' maxlength = '22' placeholder="请输入email" class="form-control">            
        </div>  
        </div>  
        <div class = 'form-group'>
        <div class = 'col-lg-3'>
            <label for="gt">
            <span class = 'glyphicon glyphicon-phone'></span>
            手机:</label> 
            <span style = 'font-size:20px;'>
            <span class = 'telVal'>0</span>/11</span>
            <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" name="gyl_personnel_tel_register" id = 'gt' maxlength = '11' placeholder="请输入手机号" class="form-control">            
        </div> 
        </div> 
        <div class = 'form-group'>
        <div class = 'col-lg-3'>
            <label for="gj">
            <span class = 'glyphicon glyphicon-gift'></span>
            职位:</label> 
            <span style = 'font-size:20px;'>
            <span class = 'gjVal'>0</span>/16</span>
            <input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')" name="gyl_personnel_job_register" maxlength = '16' id = 'gj' placeholder="请输入职位" class="form-control">  </div> 
        </div>
        <div class = 'form-group'>
        
      <div class="svg-wrapper">
      <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
      <rect id="shape" height="40" width="150" />
      <div id="text">
        <a href="#" onclick = "$('form').submit()"><span class="spot">注册</span></a> 
      </div>
      </svg>
      </div>
       
        <!-- <input type="submit" id = 'btn' class = 'btn btn-success' value = '注册'>  -->
        </div>
        </div>
        </div>
        </div>
    </form>

css：

写的有些乱，个别不是上面表单的。需要的自行整理下哈

 #tablecontainer
    {
        position: fixed;
        top:10%;
        right:-38%;
    }
    /*输入框表单的样式*/
    #gm,#ga,#ge,#gj,#gt,#gu,#psd,#repsd,#element1,#element2,#element3,#fwgt,#element4,#element5
    {
        color:white;
        border:1px solid LightSkyBlue;
        background:transparent;

        /*z-index:1;*/
    }
    #navSearch
    {   color:white;
        border:1px solid LightSkyBlue opacity: 0.5;
        background:transparent;
        
    }
    /*按钮的位置*/
   #btn
   {
    position: relative;
    right: -200px;
   }
   /*字体和图标颜色*/
   label
   {
    color: white;
   }
   /*获取鼠标单击事件的span*/
   .cover
   {
   display:inline-block;
   border:0px;
   width:30px;
   height:30px;
   position:absolute;
   right:18px;
   top:27px;
   z-index:100;
   cursor:pointer;
   }
   .recover
   {
   display:inline-block;
   border:0px;
   width:30px;
   height:30px;
   position:absolute;
   right:18px;
   top:27px;
   z-index:100;
   cursor:pointer;
   }
   #spanS
   {
    cursor:pointer;
   z-index:99;
   color:white;
   opacity: 0.8;
   }
    /*密码里闭着的眼睛*/
   #spsd
   {
     position:absolute;
    top: 38px;
    font:bold 1.5em/24px arial,verdana;
   cursor:pointer;
   z-index:99;
   color:white;
   opacity: 0.8;
   }
  /*睁开的眼睛*/
   #spsd2
   {
   position:absolute;
    top: 38px;
    font:bold 1.5em/24px arial,verdana;
   display:none;
   color: rgb(116, 255, 255);
   }
   #respsd
   {
     position:absolute;
    top: 38px;
    font:bold 1.5em/24px arial,verdana;
   cursor:pointer;
   z-index:99;
   color:white;

   }
  /*睁开的眼睛*/
   #respsd2
   {
     position:absolute;
    top: 38px;
    font:bold 1.5em/24px arial,verdana;
   display:none;
   color: rgb(116, 255, 255);
   }
   /*导航栏鼠标颜色*/
   li:hover
   {
    background-color: red;
   }
  
    /*多个表单*/
   #sadminInput,#adminInput,#userInput,#container-form
   {
    display: none;
   }
  
  /*合袋*/
   #element
   {
    position: fixed;
    top:50%;
    right:-10%;
    display: none;
   }
   /*更新*/
   #elementU
   {
    position: fixed;
    top:50%;
    right:-10%;
    display: none;
   }
   /*解除审核*/
    #elementR
   {
    position: fixed;
    top:50%;
    right:-10%;
    display: none;
   }
   #elementOff
   {
    position: fixed;
    top:50%;
    right:-10%;
    display: none;
   }

  #if
  {
    position: absolute;
    right: 2em;
  }

  #searchform
  {
    position: absolute;
    left: 56%;
  }
  #aSearch
  {
    color:white;
    text-decoration:none;
  }

  #gg
  {
    /*opacity: 0;*/
    display: none;
  }
 
  /*光标*/
  input
  {
    /*font:14px black bold;*/
    caret-color:yellow; 
  }
  
html{height:100%;background-image:-webkit-radial-gradient(ellipse farthest-corner at center top,#000d4d 0,#000105 100%);background-image:radial-gradient(ellipse farthest-corner at center top,#000d4d 0,#000105 100%);cursor:url('http://testtp5.xyz/wp-content/uploads/2018/05/bitbug_favicon.ico'),auto}
body{width:100%;height:100%;margin:0;overflow:hidden}
iframe{top:0;left:0;height:100%;width:100%;position:absolute}
  *{margin:0px;padding:0px; font-family: "微软雅黑";}

jquery：

//密码框的眼睛切换
  var count = 0;
  $('.cover').click(function()
  {
    count += 1;
    //alert('test');
    if(count % 2 == 0)
    {
      $('#spsd2').hide(500);
      $('#spsd').show(500,function()
      {
        $('#psd').attr('type','password');
      });
    }else{
    $('#spsd').hide(500,function()
    {
      $('#spsd2').show(500,function()
        { 
        $('#psd').attr('type','text');
        });
    });
    }
  });
  // 再次输入密码
   var count = 0;
  $('.recover').click(function()
  {
    count += 1;
    //alert('test');
    if(count % 2 == 0)
    {
      $('#respsd2').hide(500);
      $('#respsd').show(500,function()
      {
        $('#repsd').attr('type','password');
      });
    }else{
    $('#respsd').hide(500,function()
    {
      $('#respsd2').show(500,function()
        { 
        $('#repsd').attr('type','text');
        });
    });
    }
  });

  //字数限制-sadmin
$('#gm').keyup(function()
  {
      var $aspan = $('#gm').val().length;
     
      $('.saValue').html($aspan);  
   });
//admin
$('#ga').keyup(function()
  {
      var $aspan = $('#ga').val().length;
     
      $('.aValue').html($aspan);  
   });
//users
$('#gu').keyup(function()
  {
      var $aspan = $('#gu').val().length;
     
      $('.uValue').html($aspan);  
   });
//psd
$('#psd').keyup(function()
  {

 var $aspan = $('#psd').val().length;
      $('.psdVal').html($aspan);  
   });
// repsd
$('#repsd').keyup(function()
  {

 var $aspan = $('#repsd').val().length;
      $('.repsdVal').html($aspan);  
   });

//性别
   var count = 0;
  $('#checkbox-10-1').click(function()
    {     
     count += 1;      
     if(count % 2 == 0)
      {
        $('.ggMan').removeProp('checked');
        $('.ggWomen').prop('checked','true'); 
       }else{
         $('.ggWomen').removeProp('checked');
         $('.ggMan').prop('checked','true');  //attr()会致使checked无效！            
      }
    });
  $('#test').mouseover(function()
    {
      $('.checkbox-0-').removeAttr('disabled');
    });

// email
$('#ge').keyup(function()
  {
  $('.checkbox-0-').attr('disabled','true');//给checkbox添加个属性禁止提交到后台
 var $aspan = $('#ge').val().length;
      $('.eVal').html($aspan); 
   });


//tel
$('#gt').keyup(function()
  {

 var $aspan = $('#gt').val().length;
      $('.telVal').html($aspan);  
   });
//job
$('#gj').keyup(function()
  {

 var $aspan = $('#gj').val().length;
      $('.gjVal').html($aspan);  
   });