JavaScript表单验证的两种实现方法

本文实例为大家分享了js表单验证的实现方法，供大家参考，具体内容如下

第一种：js表单验证

  
  
  
  
  
  
  
    body {
      font-family: Arial, "宋体", Lucida, Verdana, Helvetica, sans-serif;
      font-size: 12px;
      color: #333;
      line-height: 150%;
      background: #f2f2f2;
    }

    .hide{display:none;}

    .focus,.error {
      color: #e4393c;
      line-height: 36px;
      height: 36px;
      position: absolute;
      top: 0px;

      width: 260px;
      padding: 0 5px;
      background: #FFEBEB;
      border: 1px solid #ffbdbe;
    }

    .error span,.focus span {
      padding: 5px 0;
      line-height: 13px;
      display: block;
    }

    .focus {
      color: #666;
      width: 260px;;
      line-height: 36px;
      background: #f7f7f7;
      border: 1px solid #dddddd;
    }

    .regist {
      width: 990px;
      padding: 0;
      margin: 0 auto;
      zoom: 1;
    }


    .mc {
      padding: 30px 0 20px;
      border: solid #dddddd; border-width : 0px 1px 1px;
      background: #FFF;
      overflow: hidden;
      zoom: 1;
      border-width: 0px 1px 1px;
    }

    .form {
      float: left;
      width: 750px;
      font-size: 12px;
    }

    .form label,.form input,.form select,.form textarea,.form button,.form .label {
      float: left;
      font-size: 12px;
    }

    .item {
      padding-top: 9px;
      height: 60px;
      line-height: 34px;
      position: relative;
      z-index: 1;
    }

    .label {
      float: left;
      width: 190px;
      text-align: right;
      font-size: 14px;
      color: #999;
      padding-right: 10px;
    }

    .input {
      float: left;
      position: relative;
      width: 270px;
      overflow: visible;
    }

    .text {
      float: none;
      width: 275px;
      height: 37px;
      line-height: 32px;
      border: 1px solid #cccccc;
      font-size: 14px;
      font-family: arial, "宋体";
      overflow: hidden;
    }

  


   
    
      
      
  


   

第二种：

  
    
    
    
    
      * {
 padding: 0;
 margin: 0;
      }

      form {
 width: 570px;
 height: 300px;
 margin: 100px auto;
      }

      label {
 width: 64px;
 float: left;
 clear: left;
 height: 36px;
 line-height: 36px;
 margin-top: 10px;
      }

      input {
 width: 300px;
 height: 36px;
 line-height: 36px;
 margin-top: 10px;
 text-indent: 8px;
 font-size: 16px;
 font-family: "微软雅黑";
 border: 1px solid #ccc;
 float: left;
      }

      #sub {
 width: 302px;
 height: 40px;
 border: 1px solid #ccc;
 background: #888;
 color: #fff;
 font-size: 18px;
 text-indent: 0;
      }

      .spa {
 height: 36px;
 line-height: 36px;
 width: 204px;
 display: inline-block;
 float: left;
 font-size: 12px;
 color: #BD362F;
 text-indent: 10px;
 margin-top: 10px;
      }
    
  

  
    
    
    
  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。