最近參與的專案，總結其中的幾個功能點：今天先來簡單的，點選 新增 按鈕，頁面彈出彈框，彈框中通過表單輸入形式，使用者輸入內容，點選 確定 ，進行表單驗證，驗證通過後實現新增內容到頁面。所用框架與外掛：angular、layer

1、點選新增執行對應事件：彈出彈窗

$scope.add = function(){
    //應用jQuery選取元素並顯示
    var addDom = $('#addContent'); //選中在彈窗中顯示的html元素
    addDom.show();  //元素原本隱藏，使其顯示
    //接下來是layer的用武之地：
    var index = layer.open({
        type:1
 
,
        area:'750px',
        offset: '100px',
        closeBtn :1,
        title: ["新增",
                "background:#0074d9;
                color:#fff;
                margin-bottom:24px;"
                ],
        content: addDom,
        success: function(layero,index){

        },
        cancel:function
 
(){
            addDom.hide();
            $scope.$apply(function(){
                $scope.toCancel();
            });
            layer.close(index);
        }
    });
}

type - 基本層型別
型別：Number，預設：0
layer提供了5種層型別。可傳入的值有：0（資訊框，預設）1（頁面層）2（iframe層）3（載入層）4（tips層）。 若你採用layer.open({type: 1})方式呼叫，則type為必填項（資訊框除外）

area - 寬高
型別：String/Array，預設：’auto’
在預設狀態下，layer是寬高都自適應的，但當你只想定義寬度時，你可以area: ‘500px’，高度仍然是自適應的。當你寬高都要定義時，你可以area: [‘500px’, ‘300px’]

offset - 座標
型別：String/Array，預設：垂直水平居中

offset預設情況下不用設定。但如果你不想垂直水平居中，你還可以進行以下賦值：
值 備註
offset: ‘100px’ 只定義top座標，水平保持居中
offset: [‘100px’, ‘50px’] 同時定義top、left座標
offset: ‘t’ 快捷設定頂部座標
offset: ‘r’ 快捷設定右邊緣座標
offset: ‘b’ 快捷設定底部座標
offset: ‘l’ 快捷設定左邊緣座標
offset: ‘lt’ 快捷設定左上角
offset: ‘lb’ 快捷設定左下角
offset: ‘rt’ 快捷設定右上角
offset: ‘rb’ 快捷設定右下角

closeBtn - 關閉按鈕
型別：String/Boolean，預設：1
layer提供了兩種風格的關閉按鈕，可通過配置1和2來展示，如果不顯示，則closeBtn: 0

title - 標題
型別：String/Array/Boolean，預設：’資訊’
title支援三種類型的值，若你傳入的是普通的字串，如title :’我是標題’，那麼只會改變標題文字；若你還需要自定義標題區域樣式，那麼你可以title: [‘文字’, ‘font-size:18px;’]，陣列第二項可以寫任意css樣式；如果你不想顯示標題欄，你可以title: false

content - 內容
型別：String/DOM/Array，預設：”
content可傳入的值是靈活多變的，不僅可以傳入普通的html內容，還可以指定DOM，更可以隨著type的不同而不同。

success - 層彈出後的成功回撥方法
型別：Function，預設：null
當你需要在層建立完畢時即執行一些語句，可以通過該回調。success會攜帶兩個引數，分別是當前層DOM當前層索引。如：

layer.open({
  content: '測試回撥',
  success: function(layero, index){
    console.log(layero, index);
  }
});     

cancel - 右上角關閉按鈕觸發的回撥
型別：Function，預設：null
該回調攜帶兩個引數，分別為：當前層索引引數（index）、當前層的DOM物件（layero），預設會自動觸發關閉。如果不想關閉，return false即可，如；

cancel: function(index, layero){ 
  if(confirm('確定要關閉麼')){ //只有當點選confirm框的確定時，該層才會關閉
    layer.close(index)
  }
  return false; 
}   

2.點選彈窗確定按鈕，校驗輸入內容欄位規則：
由於欄位規則較為特殊，有一些長度的特殊限制，使用angular表單驗證不是很方便，故自己寫校驗方法：

各輸入框的model值：
$scope.addDev = {
    field1:'',
    field2:'',
    field3:'',
    field4:'',
    field5:$scope.itemSelectedArr
};
//準備一個新增表單提交的變數，在表單提交時開始校驗，如有錯誤資訊開始顯示；
$scope.addSub = false;  //新增表單提交
//準備一個記錄錯誤資訊的變數，資料型別為物件
$scope.validErrorMsg = {};  //記錄錯誤提示資訊
校驗方法：
validAddForm = function(){
    //給記錄錯誤提示資訊的物件$scope.validErrorMsg新增屬性：每個輸入欄位對應一個屬性，分別記錄每個欄位可能出現的錯誤提示資訊。對應的屬性值初始為空字串：
    $scope.validErrorMsg.field1 = '';
    $scope.validErrorMsg.field2 = '';
    $scope.validErrorMsg.field3 = '';
    $scope.validErrorMsg.field4 = '';
    $scope.validErrorMsg.field5 = '';
}
    //開始校驗
    取到各輸入框繫結的model值
    var _field1 = $scope.addObj.field1,
        _field2 = $scope.addObj.field2,
        _field3 = $scope.addObj.field3,
        _field4 = $scope.addObj.field4,
        _field5 = $scope.addObj.field5
    //欄位1的欄位正則：中文、數字、字母、下劃線
    var _regField1 = /^[\u4e00-\u9fa50-9A-Za-z_]+$/;
    //校驗開始啦~
    逐個欄位開始校驗，先校驗欄位1：
    if(!_field1){
        $scope.validErrorMsg.field1 = '欄位1不能為空';
    }
    else if( String(_field1).length > 10 ){
        $scope.validErrorMsg.field1='欄位1長度不能超過10個字元';
    }
    else if( !_regField1.test(_field1) ){
        $scope.validErrorMsg.field1='欄位1僅支援中文、數字、字母及下劃線';
    }
    //校驗欄位2：
    var _regField2=/^[a-f0-9]+$/;  //16進位制數字及字母
    if(!_field2){
        $scope.validErrorMsg.field2='欄位2不能為空';
    }
    else if( String(_field2).length != 32 &&        String(_field2).length != 64){
        $scope.validErrorMsg.field2='欄位2長度為32或64個字元';
    }
    else if( !_regField2.test(_field2) ){
        $scope.validErrorMsg.field2='欄位2只能是16進位制數字及字母（0-9、a-f）';
    }
    //校驗欄位3：欄位3為非必填項
    var _regField3 = /^[a-zA-Z0-9]+$/;   //數字、字母
    if(_field3 && String(_field3).length != 64){                                            $scope.validErrorMsg.field3='欄位3長度為64個字元';
    }
    else if(_field3 && !_regField3.test(_field3)){
         $scope.validErrorMsg.field3='欄位3只能是數字及字母（0-9、a-z、A-Z）';
    }
    //校驗欄位4：
    var _regField4 = /^[a-zA-Z0-9]+$/;
    if(!_field4){
        $scope.validErrorMsg.field4='field4不能為空';
    }
    else if( String(_field4).length != 8){
        $scope.validErrorMsg.field4='field4長度為8個字元';
    }
    else if( !_regField4.test(_field4) ){
        $scope.validErrorMsg.devType='field4只能是數字及字母（0-9、a-z、A-Z）';
    }

    //校驗完畢後，列舉錯誤資訊物件$scope.validErrorMsg中每一項是否為初始的空字串還是儲存了錯誤提示資訊，如果任意一項有錯誤提示資訊，則整個表單為校驗不通過；否則校驗通過：
    for(var prop in $scope.validErrorMsg){
        if( $scope.validErrorMsg[prop] ){
             return false;
        }
    }
    return true;
}