/*
* zCool UI 0.1 - Javascript
*
* Copyright (c) 2008 zhou BaiMin (zCool.cn)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* $Date: 2009-07-02 09:28:00 BeiJing $
* $Revision: 1 $
*/
/*
import zCool.js
import zCool.UI.js
*/
(function($, undefined){
// 基本对象
var window = this,
DOC = window.document,
typeSupport = function(type){
var input = DOC.createElement('input');
input.setAttribute('type', type);
return input = input.type === type;
},
FORM_ELEMENT_TAG = { INPUT:1, SELECT:1, TEXTAREA:1, BUTTON:1 },
// 通常不需要验证的类型
INPUT_RIGHT_TYPE = {
hidden: 1,
submit: 1,
image: 1,
reset: 1,
button: 1
},
// 选择类型
INPUT_CHOOSE_TYPE = $.INPUT_CHOOSE_TYPE = { radio:1, checkbox:1 },
// 元素的全部类型
// 输入字符可见的输入类型
INPUT_HTML5_TYPE = {
// hidden: 0,
// submit: 0,
// image: 0,
// reset: 0,
// button: 0,
checkbox: 'group',
radio: 'group',
file: 0,
text: 1,
password: 1,
search: 1,
// 以下为 html5 新增输入类型
tel: /^(\d+-)?\d+$/,
url: /^(?:[a-zA-Z]+:\/\/)?(?:\w+\.)+\w+(?::\d+)?(?:\/|\/.+)?$/,
email: /^[\w-.]+@(?:\w+\.)+\w+$/,
// datetime: 1,
date: /^\d{4}-(?:(?:0?2-(?:0[1-9]|[12][0-9]))|(?:0?[13578]|1[02])-(?:0?[1-9]|[1-2]\d|3[01])|(?:0?[469]|11)-(?:0?[1-9]|[1-2]\d|30))|(?:(?:(?:0[1-9]|[12][0-9])\/0?2)|(?:0?[1-9]|[1-2]\d|3[01])\/(?:0?[13578]|1[02])|(?:(?:0?[1-9]|[1-2]\d|30)\/0?[469]|11))\/\d{4}$/,
month: /^(?:0?[1-9]|1[0-2])$/,
week: /^(?:0?[1-9]|[1-4]\d|5[0-2])$/,
time: /^(?:[0-1]\d|2[0-4]):(?:[0-5]\d):(?:[0-5]\d)$/,
'datetime-local': /^$/,
number: /^\d+$/,
color: /^#(?:[\da-fA-F]{2}){3,4}$/,
range: function(value){
if( isNaN( value = Number(value) ) ){
return false;
}
var min = this.getAttribute('min'),
max = this.getAttribute('max');
min = min ? Number(min) || 0 : 0;
max = max ? Number(max) || 0 : 0;
return max >= value && value >= min;
}
},
rInputClassType = /\binput-([a-z]+)\b/,
// 必填项类型集合
INPUT_REQUIRED_TYPE = {},
// 模式匹配类型集合
INPUT_PATTERN_TYPE = {},
// 选项分组
INPUT_GROUP_TYPE = { radio:1, checkbox:1 },
requiredValidClass = 'required-valid',
requiredInvalidClass = 'required-invalid',
patternInvalidClass = 'pattern-invalid',
validIcoClass = 'valid-ico',
validIcoHideClass = 'valid-ico-hide',
chooseGroupClass = 'choose-group',
labelCheckedClass = 'label-checked',
requiredClass = 'required',
invalidBlinkClass = 'invalid-blink',
asyncValidLoadingClass = 'async-valid-loading',
asyncInvalidClass = 'async-invalid',
asyncValidInfoClass = 'async-valid-info',
FORM_REQUIRED = $.attrSupport('required', 'input'),
setRequired = FORM_REQUIRED ?
function( el, required ){
el.required = !!required;
$(el).prev('b.required')[required ? 'removeClass' : 'addClass']('required-off');
} :
function( el, required ){
required ? el.setAttribute('required', 'required') : el.removeAttribute('required');
$(el).prev('b.required')[required ? 'removeClass' : 'addClass']('required-off');
},
isRequired = FORM_REQUIRED ?
function( el ){ return el.required; } :
function( el ){ return el.getAttribute('required') !== null; },
isChooseRequired = {
radio: isRequired,
checkbox: function( el ){
return el.getAttribute('data-required') !== null || $(el).hasClass('required');
}
},
// 获取或创建输入验证的小图标
getValidIco = function(el){
return $.next(el, '.' + validIcoClass) ||
$('').
afterTo( $(el).hasClass('input-date') && $.next(el, 'a.Calendar-trigger') || el )[0];
},
// 尝试检测是否必选，若必选则设置
//
setGroupRequired = function( el ){
var form = el.form;
name = el.name,
$inputs = name && $( form[name] );
if( $inputs && $inputs.some( isChooseRequired[ el.type ] ) ){
// 获取或创建选项组的目标父容器 和 验证小图标
var target = $(el).ancestor('.' + chooseGroupClass)[0];
if( !target ){
return el;
}
var validIco = getValidIco( target );
//
if( ( $input = $inputs.filter(function(input){ return input.checked; }) ).length > 0 &&
$input.every(function(input){ return input.value; }) ){
$( [validIco, target] ).
removeClass( requiredInvalidClass ).
addClass( requiredValidClass );
}
else{
return $( [validIco, target] ).
removeClass( requiredValidClass ).
addClass( requiredInvalidClass );
}
}
},
// 设置关联字段
setLinkage = function( target ){
var linkageName = target.getAttribute('data-linkage-name'),
linkage, form;
if( linkageName && (form = target.form) && (linkage = form[linkageName]) ){
if( linkage.form === form || ((linkage = linkage[0]) && linkage.form === form) ){
var checked = target.checked;
switch( target.type ){
case 'checkbox':
$(linkage).
ancestor('.data-linkage')
[checked ? 'removeClass' : 'addClass']
('data-linkage-off');
break;
case 'radio':
if( checked ){
$(linkage).
ancestor('.data-linkage')
.removeClass('data-linkage-off');
$(form[target.name]).each(function(el){
el !== target && setLinkage(el);
});
}
else{
$(linkage).
ancestor('.data-linkage')
.addClass('data-linkage-off');
}
break;
}
var linkageMethod = target.getAttribute('data-linkage-method');
switch( linkageMethod ){
case 'input':
var defaultValue = target.getAttribute('data-default-value');
if( defaultValue === null){
target.setAttribute('data-default-value', defaultValue = target.defaultValue );
}
if( checked ){
linkage.disabled = false;
setRequired(linkage, true);
if( linkage.value ){
target.value = linkage.value;
}
else{
linkage.value = target.value;
$Form.validation( linkage );
}
}
else{
linkage.disabled = true;
setRequired(linkage, false);
target.value = defaultValue;
}
$(linkage).blur(linkageBlur);
break;
}
}
}
},
setDefaultAttr = function(el, attr){
var defaultAttr = el.getAttribute('data-default-' + attr);
if( defaultValue === null){
target.setAttribute('data-default-' + attr, defaultValue = target.defaultValue );
}
},
linkageBlur = function(e){
var target = e.target, form = target.form, name = target.name;
$.formElements(form).some(function(el){
if( el.getAttribute('data-linkage-name') === name ){
el.value = target.value;
setGroupRequired(el);
return true;
}
});
},
// 元素匹配并返回placeholder值
matchPlaceholder = function(el, nodeName, type){
nodeName || (nodeName = el.nodeName);
if( nodeName === 'TEXTAREA' ||
(nodeName === 'INPUT' && INPUT_PATTERN_TYPE[ type || el.type ]) ){
var p = el.getAttribute('placeholder');
return p && p.trim();
}
},
// 表单初始化
$Form = $.Form = function(form){
// 初始化输入占位符（html5 提示文字暗记）
$Form.placeholder(form, true);
$( form ).
click( $Form.click ).
focusin( $Form.focusin ).
focusout( $Form.focusout ).
submit( $Form.submit );
// 初始化设置选项组中的默认选中项
$Form.setFormDefaultChecked(form);
return form;
};
$.extend($Form, {
// 对表单元素（也可以是一个根元素或文档碎片中包含的多个表单元素）进行重置
// @el
// @form