DIV CSS 佈局教程網

具體內容請看注釋，這裡就不多BB了，

奉上代碼：

/// <reference path="vendor/jquery-1.4.1-vsdoc.js" />
///檢測表單中的不能為空（.notnull）的驗證
/*
 時間：2012-6-6
 作用：一對form標簽下有多個（包括一個）表單需要提交時，使用js准確的判斷當前按鈕對那些元素做判斷
 用法：在form標簽下 找到當前 表單的容器 給予class="form"，當前表單的提交按鈕給予 class="check"
 需要驗證為空的元素給予class="notnull" nullmsg="xx不能為空！"提示，需要進行邏輯判斷的表單給予class="need"
 判斷的類型給予 class="num"(只能是數字) 驗證的提示 logicmsg="XX只能是數字"
 給予class="errorMessage"顯示錯誤信息塊
 給予class="warn"顯示錯誤信息
 未使用js面向對象編程
 邏輯判斷，不傳入need標識，直接給出正則表達式屬性（自定義）regex="/^\d$/" 做出判斷
 在外部實現
 Global.submitCallback button回調函數
 Global.confirmCallback confirm回調函數;
 需要改進的地方：
 暫無
 更新時間：2014年12月3日 16:23:22
 作者：Amber.Xu
 */
//$(document).ready(
//  function () {
//    $("form").find(".notnull").bind({
//      focus: function () {
//        if ($(this).attr("value") == this.defaultValue) {
//          $(this).attr("value", "");
//        }
//      },
//      blur: function () {
//        if ($(this).attr("value") == "") {
//          $(this).attr("value", this.defaultValue);
//        }
//      }
//    });
//  }
//);
///*封裝一個萬能檢測表單的方法*/
///event.srcElement：引發事件的目標對象，常用於onclick事件。
///event.fromElement：引發事件的對象源，常用於onmouseout和onmouseover事件。
///event.toElement：引發事件後，鼠標移動到的目標源，常用於onmouseout和onmouseover事件。
function Global() {
  var _self = this;
}
Global.submitCallback = null;
Global.confirmCallback = null;
$(document).ready(function () {
  //form body
  $("body").find(".form").each(function () {
    this.onclick = function (e) {
      var button = null;
      try {
        button = e.srcElement == null ? document.activeElement : e.srcElement;
      } catch (e) {
        console.log(e.message)
        button = document.activeElement;
      }
      if ($(button).is(".check")) {
        //alert("提交")
        var sub = (checkform(this) && CheckInputRex(this) && checkselect(this) && checkChecked(this));
        if (sub) {
          // Call our callback, but using our own instance as the context
          Global.submitCallback.call(this, [e]);
        }
        return sub;
      } else if ($(button).is(".confirm")) {
        //alert("刪除")
        var sub = confirm($(button).attr("title"));
        if (sub) {
          Global.confirmCallback.call(this, [e]);
        }
        return sub;
      } else {
        //          //alert("其它")
        return true;
      }
    }
  });
  /*檢測表單中不能為空的元素*/
  function checkform(form) {
    var b = true;
    $(form).find(".notnull").each(function () {
      if ($.trim($(this).val()).length <= 0) {//|| $(this).val() == this.defaultValue
        //        if (this.value != null) {
        //          $(this).attr("value", "");
        //        }
        //alert($(this).attr("msg"))
        $(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
        $(this).parents(".form").find(".errorMessage").show();
        $(this).select();
        $(this).focus();
        return b = false;
      }
    });
    if (b == true) {
      $(form).find(".warn").text("");
      $(form).find(".errorMessage").hide();
    }
    return b;
  }
  /*檢測表單中必選的下拉列表*/
  function checkselect(form) {
    var b = true;
    $(form).find(".select").each(function (i) {
      var ck = $(this).find('option:selected').text();
      if (ck.indexOf("選擇") > -1) {
        $(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
        $(this).parents(".form").find(".errorMessage").show();
        $(this).select();
        $(this).focus();
        return b = false;
      }
    });
    return b;
  }
  /*檢測表單中必選的復選框*/
  function checkChecked(form) {
    var b = true;
    $(form).find(".checkbox").each(function (i) {
      var ck = $(this)[0].checked;
      if (!ck) {
        $(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
        $(this).parents(".form").find(".errorMessage").show();
        $(this).select();
        $(this).focus();
        return b = false;
      }
    });
    return b;
  }
  //檢查是否匹配該正則表達式
  function GetFlase(value, reg, ele) {
    if (reg.test(value)) {
      return true;
    }
    $(ele).parents(".form").find(".warn").text($(ele).attr("logicmsg"));
    $(ele).parents(".form").find(".errorMessage").show();
    $(ele).focus();
    $(ele).select();
    return false; //不能提交
  }
  function CheckInputRex(form) {
    var b = true;
    $(form).find("input[type='text']").each(function () {
      if (typeof ($(this).attr("regex")) == 'string') {
        if ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {
          //當前表單的值
          var value = $(this).attr("value") || $(this).val();
          var regx = eval($(this).attr("regex"));
          return b = GetFlase(value, regx, this);
        }
      }
    });
    return b;
  }
  ///檢查用戶輸入的相應的字符是否合法
  ///此方法已廢棄
  function CheckInput(form) {
    var b = true;
    $(form).find(".need").each(function () {
      if ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {
        //當前表單的值
        var value = $(this).attr("value");
        //id的值或者name的屬性的值如：[name="contact"]
        var name = $(this).attr("class");
        //檢查需要輸入的內容是否合法如：聯系方式
        var len = name.split(" ");
        for (var i = 0; i < len.length; i++) {
          switch ($.trim(len[i])) {
            ///聯系方式                                                                      
            case "mobile":
              var reg = /^1\d{10}$/;
              return b = GetFlase(value, reg, this);
              break;
            ///郵箱                                                                     
            case "email":
              var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
              return b = GetFlase(value, reg, this);
              break;
            ///兩次密碼是否一致                                                                
            case "password":
              break;
            case "password2":
              if ($("#password").attr("value") != $("#password2").attr("value")) {
                $(this).select(); //獲取焦點
                $(this).parents(".form").find(".warn").text($(this).attr("logicmsg"));
                $(this).parents(".form").find(".errorMessage").show();
                return b = false; //不能提交
              }
              break;
            case "worktel":
            case "hometel": //家庭電話
              var reg = /^\d{8}$/;
              return b = GetFlase(value, reg, this);
              break;
            case "post": //郵編
              var reg = /^\d{6}$/;
              return b = GetFlase(value, reg, this);
              break;
            case "bonus":
            case "allowance":
            case "FixedSalary":
              var reg = /^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0|[1-9]\d)$/;
              return b = GetFlase(value, reg, this);
              break;
            case "identity":
              var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
              return b = GetFlase(value, reg, this);
              break;
            case "height":
              var reg = /^[1-2][0-9][0-9]$/;
              return b = GetFlase(value, reg, this);
              break;
            case "qq":
              var reg = /^[1-9][0-9]{4,}$/;
              return b = GetFlase(value, reg, this);
              break;
            case "begintime":
            case "endtime":
              var reg = /^\d{4}$/;
              if (reg.test(value) && (parseInt($(".endtime").val()) > parseInt($(".begintime").val()))) {
                return b;
              }
              $.ligerDialog.alert($(this).attr("msg"))
              $(this).select(); //獲取焦點
              return b = false; //不能提交
              break;
            case "num":
              var reg = /^\d+$/;
              return b = GetFlase(value, reg, this);
              break;
            ///大陸去香港需要辦理往來港澳通行證和香港的簽注.因私普通護照號碼格式有:                              
            ///14/15+7位數,G+8位數；                              
            ///因公普通的是:P.+7位數；                              
            ///公務的是：S.+7位數 或者                              
            //S+8位數,以D開頭的是外交護照                              
            case "postport": //護照號碼
              var reg = /^(P\d{7}|G\d{8}|S\d{7,8}|D\d+|1[4,5]\d{7})$/;
              return b = GetFlase(value, reg, this);
              break;
            case "bankaccount":
              var reg = /^[0-9]{19}$/;
              return b = GetFlase(value, reg, this);
              break;
          } //switch
        } //for
      }
    });
    return b;
  }
  ///此方法已經廢棄
});
///單擊改變背景顏色
$(document).ready(function () {
  var inputs = $("#top>.c>input");
  $(inputs).each(function () {
    this.onclick = function () {
      document.getElementById("main").style.backgroundColor = this.name;
      //$("#main").backgroundColor = this.name;
    }
  });
});

基本上常用的功能都封裝在內了，希望小伙伴們能夠喜歡。