diff --git a/gallery/form/1.3/auth/field/field.js b/gallery/form/1.3/auth/field/field.js index d1b0cc4..facc734 100644 --- a/gallery/form/1.3/auth/field/field.js +++ b/gallery/form/1.3/auth/field/field.js @@ -164,24 +164,6 @@ KISSY.add('gallery/form/1.3/auth/field/field', function (S, Event, Base, JSON, D } }, - /** - * 合并html的属性配置,比如获取required-msg,或者data-valid(不推荐使用) - * @private - */ - _getMsgConfig:function(el){ - if(!el) return {}; - if (DOM.attr(el, CONFIG_NAME)) { - var cfg = DOM.attr(el, CONFIG_NAME); - - cfg = Utils.toJSON(cfg); - //把所有伪属性都当作rule处理 - var propertyConfig = { - rules:cfg - }; - - config = S.merge(propertyConfig, config); - } - }, add:function (name, rule, cfg) { var self = this, _storage = self._storage; diff --git a/gallery/form/1.3/butterfly/collection.js b/gallery/form/1.3/butterfly/collection.js index 3edd572..9f5f024 100644 --- a/gallery/form/1.3/butterfly/collection.js +++ b/gallery/form/1.3/butterfly/collection.js @@ -1,5 +1,5 @@ -KISSY.add('gallery/form/1.3/butterfly/collection',function (S, Base, Node,Field) { - var EMPTY = ''; +KISSY.add('gallery/form/1.3/butterfly/collection',function (S, Base, Node,Field,SelectField) { + var EMPTY = '',$ = Node.all; /** * 表单的数据模块 * @class Collection @@ -10,28 +10,81 @@ KISSY.add('gallery/form/1.3/butterfly/collection',function (S, Base, Node,Field) Collection.superclass.constructor.apply(this, arguments); } S.extend(Collection, Base,{ + /** + * 想集合添加Field或SelectField数据模型 + * @param data + * @return {*} + */ add:function(data){ if(!S.isObject(data)) return false; + //字段name var name = data.name; - if(!name){ - S.log('add():第一个参数缺少name值!'); - return false; - } + //字段类型 + var type = data.type; + //字段目标元素 + var $target = data.target; + if(!name || !type || !$target) return false; + var self = this; - debugger; - var Field = self.get('Field'); - var fields = self.get('fields'); - var field = self.field(name); - if(field == EMPTY){ + + //已经存在该字段直接返回该字段 + if(self.isExist(name)) return self.field(name); + + var field = EMPTY; + + //为选择类型的数据模型 + if(self.isSelectFieldType(type)){ + name = $target.attr('name'); + //通过name来获取元素集合 + if(name){ + data.target = $(document.getElementsByName(name)); + } + + field = new SelectField(data); + }else{ field = new Field(data); - fields.push(field); } + + //向集合添加字段数据模型 + var fields = self.get('fields'); + fields.push(field); + return field; }, + /** + * 是否是SelectField数据模型 + * @param {String} type + * @return {Boolean} + */ + isSelectFieldType:function(type){ + var selectFieldTypes = ['radio','checkbox']; + if(!type) return false; + return S.inArray(type,selectFieldTypes); + }, + /** + * collection中是否存在该字段的数据 + * @param {String} name 字段名称 + * @return {Boolean} + */ + isExist:function(name){ + if(!name) return false; + var self = this; + var fields = self.get('fields'); + var field = self.field(name); + return field != EMPTY; + }, + /** + * 从表单中删除一个字段 + */ remove: function(){ }, - + /** + * 设置表单域的值 + * @param {String} name 表单元素名 + * @param {String | Object} data + * @return {*} + */ field:function(name,data){ if(!S.isString(name)) return false; var self = this; @@ -44,8 +97,8 @@ KISSY.add('gallery/form/1.3/butterfly/collection',function (S, Base, Node,Field) return true; } }); - if(S.isString(data)){ - field.set('test',data); + if(S.isString(data)) { + field.set('value',data); } else if(S.isObject(data)){ S.each(data,function(v,k){ @@ -57,6 +110,7 @@ KISSY.add('gallery/form/1.3/butterfly/collection',function (S, Base, Node,Field) },{ ATTRS:{ Field:{value:Field}, + SelectField:{value:SelectField}, fields:{ value:[] }, @@ -64,4 +118,4 @@ KISSY.add('gallery/form/1.3/butterfly/collection',function (S, Base, Node,Field) } }); return Collection; -},{requires:['base', 'node','./field']}); \ No newline at end of file +},{requires:['base', 'node','./field/base','./field/selectField']}); \ No newline at end of file diff --git a/gallery/form/1.3/butterfly/field.js b/gallery/form/1.3/butterfly/field.js deleted file mode 100644 index 36882c1..0000000 --- a/gallery/form/1.3/butterfly/field.js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * ģgallery/form/1.3/butterfly/fieldݲģ飬ݷ仯ʱԶ±ͼ - * - * @module butterfly - * @submodule butterfly-model - */ - -KISSY.add('gallery/form/1.3/butterfly/field',function (S, Base, Node) { - var EMPTY = ''; - /** - * fieldģ - * @class Field - * @constructor - * @extends mvc.Field - */ - function Field(config){ - Field.superclass.constructor.apply(this, config); - } - S.extend(Field, Base,{ATTRS:{ - target:{ - value:EMPTY, - getter:function(v){ - return S.Node.all(v); - } - }, - type:{value:EMPTY}, - name:{value:EMPTY}, - value:{ - value:EMPTY, - setter:function(v){ - debugger; - var self = this; - var target = self.get('target'); - if(target && target.length > 0){ - target.val(v); - } - return v; - } - }, - test:{value:false, - setter:function(v){ - alert(2); - return v; - } - }, - isGroup:{value:false}, - group:{value:[]} - }}); - return Field; -},{requires:['base', 'node']}); \ No newline at end of file diff --git a/gallery/form/1.3/butterfly/field/base.js b/gallery/form/1.3/butterfly/field/base.js new file mode 100644 index 0000000..1eb4c48 --- /dev/null +++ b/gallery/form/1.3/butterfly/field/base.js @@ -0,0 +1,105 @@ +/** + * ģgallery/form/1.3/butterfly/fieldݲģ飬ݷ仯ʱԶ±ͼ + * + * @module butterfly + * @submodule butterfly-model + */ + +KISSY.add('gallery/form/1.3/butterfly/field/base',function (S, Base, Node) { + var EMPTY = ''; + /** + * fieldģ + * @class Field + * @constructor + */ + function Field(config){ + Field.superclass.constructor.call(this, config); + this._init(); + } + S.extend(Field, Base,{ + /** + * ʼ + * @private + */ + _init:function(){ + var self = this; + self._syncValue(); + }, + /** + * ıֶεֵ + * @param value + * @return value + */ + val:function(value){ + var self = this; + if(!S.isUndefined(value)) self.set('value',value); + return self.get('value'); + }, + /** + * ֶ֤ + * @return {Boolean} + */ + test:function(){ + var self = this; + var authField = self.get('authField'); + var isPass = true; + if(authField) isPass = authField.validate(); + return isPass; + }, + /** + * ¼ֶͬεֵ + * @private + */ + _syncValue:function(){ + var self = this; + var $target = self.get('target'); + if(!$target || !$target.length) return false; + var syncValueEvents = self.get('syncEvents'); + //Ҫͬ¼ + $target.on(syncValueEvents,function(){ + var val =$target.val(); + self.val(val); + self.test(); + }) + } + },{ATTRS:{ + /** + * Ŀֶ + */ + target:{ + value:EMPTY, + getter:function(v){ + return S.Node.all(v); + } + }, + /** + * ֵֶͬ¼ + */ + syncEvents:{ + value:'blur' + }, + /** + * ֶ + */ + type:{value:EMPTY}, + /** + * ֶ + */ + name:{value:EMPTY}, + /** + * ֵ + */ + value:{ + value:EMPTY, + setter:function(v){ + var self = this; + var target = self.get('target'); + if(target && target.length > 0) target.val(v); + return v; + } + }, + //authֶ֤ + authField:{ value:EMPTY } + }}); + return Field; +},{requires:['base', 'node']}); \ No newline at end of file diff --git a/gallery/form/1.3/butterfly/field/selectField.js b/gallery/form/1.3/butterfly/field/selectField.js new file mode 100644 index 0000000..d66dadf --- /dev/null +++ b/gallery/form/1.3/butterfly/field/selectField.js @@ -0,0 +1,157 @@ +/** + * 模块名:gallery/form/1.3/butterfly/selectField + * + * @module butterfly + * @submodule butterfly-model + */ + +KISSY.add('gallery/form/1.3/butterfly/field/selectField',function (S, Base, Node) { + var EMPTY = ''; + var $ = Node.all; + /** + * 应用于radio或checkbox或select的数据模块,是存在多个target、多个value、增加select和index的处理 + * @class SelectField + * @constructor + */ + function SelectField(config){ + SelectField.superclass.constructor.call(this, config); + this._init(); + } + S.extend(SelectField, Base,{ + /** + * 初始化 + * @private + */ + _init:function(){ + var self = this; + self._setOptions(); + self._syncValue(); + }, + /** + * 设置选项数组 + * @private + */ + _setOptions:function(){ + var self = this; + var $target = self.get('target'); + var options = []; + $target.each(function($option){ + options.push($option.val()); + }); + self.set('options',options); + return options; + }, + /** + * 改变表单字段的值 + * @param value + * @return value + */ + val:function(value){ + var self = this; + if(!S.isUndefined(value)) self.set('value',value); + return self.get('value'); + }, + /** + * 验证表单字段 + * @return {Boolean} + */ + test:function(){ + var self = this; + var authSelectField = self.get('authField'); + var isPass = true; + if(authSelectField) isPass = authSelectField.validate(); + return isPass; + }, + /** + * 监听事件,同步字段的选中 + * @private + */ + _syncValue:function(){ + var self = this; + var $target = self.get('target'); + if(!$target || !$target.length) return false; + var syncValueEvents = self.get('syncEvents'); + //监听需要同步的事件 + $target.on(syncValueEvents,function(ev){ + var val = $(ev.target).val(); + self.set('isHtmlClick',true); + self.set('value',val); + }) + } + },{ATTRS:{ + /** + * 为选择类型的表单域,比如radio或checkbox或select + * @type {Boolean} + * @default true + */ + isSelectField:{value:true}, + /** + * 目标表单字段 + */ + target:{ + value:EMPTY, + getter:function(v){ + return S.Node.all(v); + } + }, + /** + * 同步表单字段值的事件 + */ + syncEvents:{ + value:'click' + }, + /** + * 字段类型 + */ + type:{value:EMPTY}, + /** + * 字段名 + */ + name:{value:EMPTY}, + /** + * 字段当前选中的值 + * @type {String} + * @default '' + */ + value:{ + value:EMPTY, + setter:function(v){ + var self = this; + var $target = self.get('target'); + var options = self.get('options'); + //防止重复触发click,陷入死循环 + if(self.get('isHtmlClick')){ + self.set('isHtmlClick',false); + return v; + } + if(options.length > 0) { + S.each(options,function(option,index){ + if(v == option){ + $($target[index]).fire('click'); + self.set('index',index); + } + }); + } + return v; + } + }, + /** + * 字段当前选中的索引值 + * @type {Number} + * @default -1 + */ + index:{ + value:-1 + }, + /** + * 选项值,为数组 + * @type {Array} + * @default [] + */ + options:{ value:[] }, + isHtmlClick:{value:false}, + //auth的验证字段 + authField:{ value:EMPTY } + }}); + return SelectField; +},{requires:['base', 'node']}); \ No newline at end of file diff --git a/gallery/form/1.3/butterfly/index.js b/gallery/form/1.3/butterfly/index.js index 9e01d1c..53c4301 100644 --- a/gallery/form/1.3/butterfly/index.js +++ b/gallery/form/1.3/butterfly/index.js @@ -44,29 +44,40 @@ KISSY.add('gallery/form/1.3/butterfly/index', function (S, Base, Node, Event,Col //实例化表单数据集合 self.set('collection',new Collection()); self._loadTheme(self.get('theme'), function () { + //实例化验证组件 + self._renderAuth(); self._initInput(); self._initTextArea(); self._initSelect(); - //实例化验证组件 - self._renderAuth(); self.fire('render'); }); }, + /** + * 获取元素的id,获取不到,获取name + * @param $el + * @return {String} + */ + getName:function($el){ + if(!$el || !$el.length) return ''; + return $el.attr('id') || $el.attr('name') || ''; + }, /** * 当不传参时候,验证整个表单的合法性,当参数为字符串时候,验证指定表单字段的合法性,当参数为数组时候,验证多个字段的合法性 * @param {String|Array} field 字段名 * @return {Boolean} 是否通过 */ - validate:function (field) { + test:function (field) { var self = this; var auth = self.get('auth'); + var authField; if(!auth){ S.log(LOG_PREFIX+'不存在Auth的实例!'); return false; } //验证指定表单字段的合法性 if(S.isString(field)){ - return auth.getField(field).validate(); + authField = auth.getField(field); + return authField && authField.validate() || EMPTY; } else if(S.isArray(field)){ @@ -81,19 +92,23 @@ KISSY.add('gallery/form/1.3/butterfly/index', function (S, Base, Node, Event,Col * @param field {Field|string|htmlElement} 表单域对象或html表单元素 * @param authConfig {object} 验证时使用的配置 */ - add:function(field,authConfig){ + addFieldAuth:function(field,authConfig){ var self = this; if(!field){ S.log(LOG_PREFIX + '缺少第一个field参数!'); return false; } + var auth = self.get('auth'); if(!auth){ S.log(LOG_PREFIX+'不存在Auth的实例!'); return false; } - auth.add(field,authConfig); + //处理传递的是元素name的情况 + if(S.isString(field) && !/^#/.test(field)) field = document.getElementsByName(field)[0]; + + return auth.add(field,authConfig); }, /** * 获取指定的域Model @@ -135,43 +150,16 @@ KISSY.add('gallery/form/1.3/butterfly/index', function (S, Base, Node, Event,Col * 向collection添加表单域数据 * @public */ - addField:function($filed,isGroup){ + add:function($field){ var self = this; - var field; - var type = $filed.attr('type'); - var name = $filed.attr('name'); - var value = $filed.val(); + var type = $field.attr('type'); + var name = self.getName($field); + var value = $field.val(); var collection = self.get('collection'); - var data = {target : $filed, type : type,name:name,value:value,isGroup:isGroup,group:[]}; - if(isGroup){ - var groupFiled = collection.field(name); - if(!groupFiled){ - groupFiled = collection.add(data); - } - var group = groupFiled.get('group'); - group.push(value); - groupFiled.set('group',group); - var isSelect = $filed.prop('checked'); - if(isSelect) groupFiled.set('value',value); - - field = groupFiled; - }else{ - field = collection.add(data); - } - return field; - }, - /** - * 表单域绑定数据更新事件 - * @private - */ - _fieldBindEvent:function($input){ - if(!$input || !$input.length) return false; - var self = this; - var name = $input.attr('name'); - $input.on('blur',function(ev){ - var val = $input.val(); - self.field(name,val); - }); + //验证域 + var authField = self.addFieldAuth($field); + var data = {target : $field, type : type,name:name,value:value,authField:authField}; + return collection.add(data); }, /** * 根据input的type实例化对应的表单组件 @@ -181,17 +169,11 @@ KISSY.add('gallery/form/1.3/butterfly/index', function (S, Base, Node, Event,Col var $target = self.get('target'); var $inputs = $target.all('input'); if (!$inputs.length) return false; - var noGroupTypes = ['text','spinbox']; - var groupTypes=['radio','checkbox']; //遍历input $inputs.each(function ($input) { var type = $input.attr('type'); //添加field的model - if(S.inArray(type,noGroupTypes)){ - self.addField($input); - }else if(S.inArray(type,groupTypes)){ - self.addField($input,true); - } + self.add($input); switch (type) { case 'text': self._renderLimiter($input); @@ -220,7 +202,7 @@ KISSY.add('gallery/form/1.3/butterfly/index', function (S, Base, Node, Event,Col _renderGroupCom:function ($input) { if (!$input || !$input.length) return false; var self = this; - var name = $input.attr('name'); + var name = self.getName($input); var type = $input.attr('type'); var fields = self.get('fields'); var CLASS; @@ -253,7 +235,7 @@ KISSY.add('gallery/form/1.3/butterfly/index', function (S, Base, Node, Event,Col var $target = self.get('target'); if (!$target.length) return false; var config = self.getUiConfig('auth'); - var auth = new Auth($target, config); + var auth = new Auth(null, config); self.set('auth', auth); return auth; }, diff --git a/gallery/form/1.3/butterfly/model.js b/gallery/form/1.3/butterfly/model.js deleted file mode 100644 index f232213..0000000 --- a/gallery/form/1.3/butterfly/model.js +++ /dev/null @@ -1,49 +0,0 @@ -/** - * ٹ - * @module butterfly - */ - -/** - * ģgallery/form/1.3/butterfly/modelݲģ飬ݷ仯ʱԶ±ͼ - * - * @module butterfly - * @submodule butterfly-model - */ - -KISSY.add('gallery/form/1.3/butterfly/model',function (S, Base, Node,mvc) { - var EMPTY = ''; - /** - * fieldģ - * @class Model - * @constructor - * @extends mvc.Model - */ - function Model(){ - Model.superclass.constructor.apply(this, arguments); - } - S.extend(Model, mvc.Model,{ATTRS:{ - target:{ - value:EMPTY, - getter:function(v){ - return S.Node.all(v); - } - }, - type:{value:EMPTY}, - name:{value:EMPTY}, - value:{ - value:EMPTY, - setter:function(v){ - debugger; - var self = this; - var target = self.get('target'); - if(target && target.length > 0){ - target.val(v); - } - return v; - } - }, - isGroup:{value:false}, - group:{value:[]} - }}); - return Model; -},{requires:['base', 'node','mvc']}); \ No newline at end of file diff --git a/gallery/form/1.3/demo/form/butterfly/index.html b/gallery/form/1.3/demo/form/butterfly/index.html index 8cc5a1d..606cfa0 100644 --- a/gallery/form/1.3/demo/form/butterfly/index.html +++ b/gallery/form/1.3/demo/form/butterfly/index.html @@ -74,8 +74,8 @@