项目总结一：页面弹出框+表单输入与校验形式，实现添加内容到页面

最近参与的项目，总结其中的几个功能点：今天先来简单的，点击 添加 按钮，页面弹出弹框，弹框中通过表单输入形式，用户输入内容，点击 确定 ，进行表单验证，验证通过后实现添加内容到页面。所用框架与插件：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);
        }
    });
}

layer.open(options)方法：
options:
此部分内容来源layer官方文档说明：http://www.layui.com/doc/modules/layer.html

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;
}