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