jQuery-gcxRegslideForm 滑动注册表单 - 让表单生成和验证更容易
插件描述：
本插件主要分为三部分：1.结构建立及滑动点击行为实现 2.自定义动态生成表单内容 3.表单验证和提交
插件基于jquery，纯脚本自动生成翻页注册表单。实现自动化个性化，体现在以下几点：
1. 直接在入口对象上添加插件方法即可使用
2. 外观自定义调整
3. 时间和速度自定义调整
4. 显示内容自定义
5. 显示内容样式自定义
6. 支持内容ajax生成
7. 支持表单验证，动态显示提示信息
8. 其他一些优化体验
此外，本插件对additional-methods脚本增加了一些验证拓展，来支持现在项目应用中绝大多数的表单验证功能。
下面是关于 gcxRegslideForm 的使用说明：
一、导入js库
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/gcxRegslideForm-1.1.0.js" type="text/javascript"></script>
二、入口对象上添加插件方法
<form id='reg_container' action="reg_new.php" method="post"></form>
<script>
$( function()
{
$( '#reg_container' ).gcxRegslideForm();
} );
</script>三、默认的参数设定
常规参数：
language: 'zh_ch' 语言
表单构建参数：
flip_Num: 4 总页数
reg_width: 700 注册插件整体宽度
reg_height: 500 注册插件整体高度
reg_HeadTitH: 30 注册 头部标题高度
reg_sideMargins: 30 注册插件整体 两侧留白
reg_UpLowMargins: 15 注册插件整体 上下留白
reg_bottonH: 60 注册插件 底部高度
reg_BtnWidth: 100 注册插件 两个按钮 宽度
reg_MiddleFS: 16 注册插件 中间内容部分 字体大小
reg_liMarginTB: 8 注册插件 中间每条内容 之间 间距
reg_leadFs: 2 注册插件 导语字体大小
reg_leadL: 28 注册插件 导语字体间距
iptdefWidth: 155 表单 input / select / textarea 默认宽度
txtNum: 20 表单验证错误提示，文字最大数量(只有在激活公共方法限制字数的时候才启用
时间和速度自定义参数：
slideSpeedL_s: 向左滑动速度 next
slideSpeedR_s: 向左滑动速度 back
slide_speed: 点击下方step 按钮，页面滑动速度
jump_clickCue_t: 对下方step 按钮 大跨度点击后，弹出的提示框存在时间
jump_click_s: 对下方step 按钮 大跨度点击 动画速度进行降速/提速
submit_fade_s: 提交按钮出现/消失时间，为了美观，请设置在100~1000之间，不然采用默认值 300
backModule_fadeIn_s: 返回按钮出现 速度，为了美观，请设置在100~1600之间，不然采用默认值 1000
backModule_fadeOut_s: 返回按钮消失 速度，为了美观，请设置在100~1000之间，不然采用默认值 300
四、插件核心思路
本插件使用过程中，使用者通过在参数中自行添加表单内容和表单样式（如有需要修改）来达到生成表单的目的。如需要用到ajax从后台传值，则需要在拓展方法中，将后台传入的值，生成到参数列表中去，以便插件能获取到内容，从而达到生成的目的，具体方法后面步骤再详细叙述。
五、插件的简单使用
1.增加表单内容
使用者只需在参数content列表中加入内容即可，根据需要添加的表单元素，在内容前加上前缀。注意：请严格按照示例格式输入，且注意编号是否和步骤编号对应，否则可能造成不能正确获取相关参数。
前缀如下：
Radio_： 单选框
Checkbox_： 复选框
Select_： 选择下拉框
Input_： 输入框
Password_： 密码输入框
Txt_： 文字输入框（textarea）
Lead_： 导语（类似于开头文字总起）
P_： 文字段落
Gap_： 空白块，用来填充位置
示例如下：
$( function(){
$( '#reg_container' ).gcxRegslideForm(
content = {
Example: [
'Input_name',
'P_gender',
'Radio_male',
'Radio_female',
'Input_personal Email',
'Input_date of birth',
'Input_carded',
'P_hobby',
'Checkbox_baskball',
'Checkbox_football',
'Gap_gap1',
'Checkbox_swimming',
'Checkbox_other',
'Select_marriage',
'Select_education'
]
}
);
} );
</script>生成页面如下：
2.设置表单元素样式
默认添加生成的表单元素为向左顶格，且一行一个表单元素，表单的高度和字体大小，颜色均为默认值，input / select /textarea 默认宽度为155，所有表单元素边框宽度默认为1，若要修改其样式，则同样的在参数列表中加入其样式数组对象。
样式如下：
equal： 平分值，默认状况下当前表单元素左右顶格，一行一个表单元素，若equal：2，则除以2，如果上下两个相邻的表单元素equal值都为2，则它们在同一行
postion： 位置值，分为 left，right，center
cen_adjust： 居中位置调整值。只有当 postion：center 的情况下才能激活改参数，顾名思义，调整居中位置的左右值。
norequired： 无须验证（非必填项），本插件默认所有表单控件都是需要验证（必填的）。
name： 更改name值。因为表单内容生成时，默认将内容列表每项除去前缀部分经过处理（空格替换为_）设置为name值，若默认name值过长或者使用者需要重新设置
value： 更改value值。表单内容生成value原理同name。
width： 更改width值
height： 更改height值
size： 更改设置select的size值（option显示数量）
font-size： 更改字体大小
cols： 设置textarea的列数
rows： 设置textarea的行数
注意：1.在textarea样式设置中，要注意cols和width的先后。2.理论上应该先设置equal的情况下再设置postion和cen_adjust，否则会排版错乱，本插件在对使用加载样式的参数数组进行了重排，故无需纠结顺序问题，原则上无大碍。
设置样式需要在设置对象后加上_setting，若对象中有特殊字符或者空格，则将其改为_，例如：date of birth...需要修改样式，则：date_of_birth____setting
<script>
$( function(){
$( '#reg_container' ).gcxRegslideForm(
content = {
cont_step4: [
'Input_name', 'P_gender', 'Radio_male', 'Radio_female', 'Input_personal Email', 'Input_date of birth','Input_carded',
'P_hobby', 'Checkbox_baskball', 'Checkbox_football','Gap_gap1','Checkbox_swimming', 'Checkbox_other','Select_marriage',
'Select_education'
]，
name_setting: [ 'postion:center', 'cen_adjust:0.8'],
gender_setting: [ 'equal:2.25', 'postion:right' ],
male_setting: [ 'postion:right', 'equal:7', 'cen_adjust:0.32', 'name:gender' ],
female_setting: [ 'postion:center', 'cen_adjust:0.3', 'name:gender', 'equal:4' ],
personal_Email_setting: [ 'postion:center', 'cen_adjust:0.8' ],
personal_Mobile_setting: [ 'postion:center', 'cen_adjust:0.8' ],
date_of_birth_setting: [ 'postion:center', 'cen_adjust:0.8' ],
marriage_setting: [ 'postion:center', 'cen_adjust:0.74', 'size:1', 'width:155' ],
education_setting: [ 'postion:center', 'cen_adjust:0.74', 'size:1', 'width:155' ],
hobby_setting: [ 'equal:2.25', 'postion:right' ],
baskball_setting: [ 'equal:5.8', 'postion:center', 'cen_adjust:0.7', 'name:hobby' ],
football_setting: [ 'equal:5.8', 'postion:center', 'cen_adjust:0.3', 'name:hobby' ],
gap1_setting: [ 'equal:2.22' ],
swimming_setting: [ 'equal:5.0', 'postion:center', 'cen_adjust:0.34', 'name:hobby' ]
}
);
} );
</script>3.效果展示
以上步骤都完成后，生成页面如下：
六、插件暴露的公共拓展方法
1.添加前缀
/**
* 添加前缀
* @param opts 传入参数对象opts
* @param value 添加前缀的对象value
* @param i 前缀数组的序列参数
* @returns 前缀 + value
*/
$.fn.gcxRegslideForm.add_prefix = function( opts, value, i )
{
return opts.list_prefix[ i ] + value;
};2.ajax 页面初始（第一页）加载
当使用者在插件加载时，需要采用ajax的方法生成内容，则无需在参数中添加表单内容列表，只需在此方法中从后台获取相应参数动态添加到插件参数中去。若使用者既设置了初始（第一页）的内容列表又使用了此拓展方法，则此方法会覆盖前者，若无需采用此方法，则只需在设置一个空方法即可。
/**
* ajax 页面初始加载（上传open_reg参数唤醒，下载获取初始页面内容列表 数据）
* @param opts 传入参数对象opts
* @param val ajax 传入后端的值（初始页面加载 ajax 上传激活插件）
*/
$.fn.gcxRegslideForm.ajax_Int_loading = function( opts, val )
{
$.ajax( {
type: "POST",
dataType: "json",
url: "reg_new.json",
async: false,
timeout: 1000,
data: {
"open_reg": val
},
success: function( data )
{
/*请 使用者 自己写入相应代码*/
},
complete: function( XMLHttpRequest, status )
{
if( status == 'timeout' )ajaxTimeOut.abort();
},
error: function( XMLHttpRequest, textStatus, data )
{
alert( data );
alert( XMLHttpRequest.status );
alert( XMLHttpRequest.readyState );
alert( textStatus );
}
} );
};实例：
success: function( data )
{
var intLoadCont = [];
/*每个option去寻找 自己对应的 xx_setting 样式设置选项*/
$.each( data.cont_step1, function( n, value ){ /*遍历，第一个前缀加上Load_,其余的加上Radio_，add_prefix 方法（）添加前缀*/
n == 0 ? intLoadCont.push( $.fn.gcxRegslideForm.add_prefix( opts, value, 3 ) ) : intLoadCont.push( $.fn.gcxRegslideForm.add_prefix( opts, value, 0 ) );
} );
return opts.cont_step1 = intLoadCont; //输出结果
},3.自定义初始化
/**
* 用户自定义调整 界面和参数
* @param opts 传入参数对象opts
*/
$.fn.gcxRegslideForm.customInit = function( opts ){};4.自定义后续页面ajax上传数据并获取页面内容列表数据
/**
* 自定义后续页面ajax上传数据并获取页面内容列表数据
* @param opts 传入参数对象opts
* @param i 特定页码
* @param val 上传后端的val值用于交互数据
*/
$.fn.gcxRegslideForm.ajax_cont2_loading = function( opts, i, val )
{
}实例:
$.fn.gcxRegslideForm.ajax_cont2_loading = function( opts, i, val )
{
if( i == 2 ){
/* Set a parameter, in order to control ajax will not be submitted repeatedly
No other operations are performed until a request is completed */
var flag = true;
if( flag )
$.ajax( {
type: "POST",
dataType: "json",
url: "reg_new.json",
async: false,
timeout: 1000,
data: {
"objective": val
},
success: function( data ){
var LoadCont2 = [];
var LoadCont2_opt = [];
var LoadCont4_1 = [];
var LoadCont4_1_opt1 = [];
var LoadCont4_1_opt2 = [];
var LoadCont4_2 = [];
//生成 第二部分 内容列表数据（select）
$.each( data.cont_step2, function( n, value )
{
LoadCont2.push( $.fn.gcxRegslideForm.add_prefix( opts, value, 1 ) ); /*添加前缀并且推入内容列表数组中*/
} );
//生成 第四部分 个人内容列表数据
var build_4stLsit1 = function( data, opts )
{
$.each( data.cont_step4_1, function( n, value ){
//添加前缀并且推入内容列表数组中
if( n == 2 || n == 3 )
LoadCont4_1.push( $.fn.gcxRegslideForm.add_prefix( opts, value, 0 ) );
if( n == 13 || n == 14 )
LoadCont4_1.push( $.fn.gcxRegslideForm.add_prefix( opts, value, 1 ) );
if( n == 0 || n == 4 || n == 5 || n == 6 )
LoadCont4_1.push( $.fn.gcxRegslideForm.add_prefix( opts, value, 2 ) );
if( n == 1 || n == 7 )
LoadCont4_1.push( $.fn.gcxRegslideForm.add_prefix( opts, value, 4 ) );
if( n == 8 || n == 9 || n == 11 || n == 12 )
LoadCont4_1.push( $.fn.gcxRegslideForm.add_prefix( opts, value, 5 ) );
if( n == 10 )
LoadCont4_1.push( $.fn.gcxRegslideForm.add_prefix( opts, value, 8 ) );
} );
};
//生成 第四部分 企业内容列表数据
var build_4stLsit2 = function( data, opts ){
$.each( data.cont_step4_2, function( n, value )
{
//添加前缀并且推入内容列表数组中
LoadCont4_2.push( $.fn.gcxRegslideForm.add_prefix( opts, value, 2 ) );
} );
};
//生成 第四部分 select 下拉框 内容列表数据
_storageToArr( data.marriage_opt, LoadCont4_1_opt1 );
_storageToArr( data.education_opt, LoadCont4_1_opt2 );
var checkVal = $( 'input:radio[name="objective"]:checked' ).val();
//分情况，获取 data 返回数据 存入到新的数组中去
if( checkVal == 'I want to teach or work in China' ){
_storageToArr( data.nationality_opt1, LoadCont2_opt );
build_4stLsit1( data, opts );
opts.cont_step4 = LoadCont4_1;
}
else if( checkVal == 'I want to study in China' )
{
_storageToArr( data.nationality_opt2, LoadCont2_opt );
build_4stLsit1( data, opts );
opts.cont_step4 = LoadCont4_1;
}
else if( checkVal == 'I want to post recruiting/enrollment/coopration information' )
{
_storageToArr( data.nationality_opt3, LoadCont2_opt );
build_4stLsit2( data, opts );
opts.cont_step4 = LoadCont4_2;
}
else
{
_storageToArr( data.nationality_opt4, LoadCont2_opt );
build_4stLsit1( data, opts );
opts.cont_step4 = LoadCont4_1;
}
//输出 各个内容列表数据
opts.cont_step2 = LoadCont2;
opts.nationality_opt = LoadCont2_opt;
opts.marriage_opt = LoadCont4_1_opt1;
opts.education_opt = LoadCont4_1_opt2;
flag = false; //关闭阀门，防止二次添加
},
complete: function( XMLHttpRequest, status )
{
//Timeout, and status is success, error equivalents
if( status == 'timeout' )ajaxTimeOut.abort(); //Cancel request
},
error: function( XMLHttpRequest, textStatus )
{
alert( XMLHttpRequest.status );
alert( XMLHttpRequest.readyState );
alert( textStatus );
}
} );
if( !flag )return false;
}
else{
return false;
}
//获取 data 返回数据 存入到新的数组中去
function _storageToArr( arr, new_arr )
{
$.each( arr, function( n, value ){
new_arr.push( value ); //获取 option 内容列表数据
} );
}
};
5.开关阀门条件方法
/**
* 开关阀门转换
* @param opts 传入参数对象opts
* @param i 特定页码
*/
$.fn.gcxRegslideForm.switch_change = function( opts, i )
{
if( i == 1 )$( 'input:radio[name="objective"]' ).change( function()
{
build_Switch = true;
} );
if( i == opts.flip_Num )build_Switch = false;
};改变开关阀门的状态，在特定条件下（用户自己定义），才会打开开关，这决定了当界面到当前步骤的时候，是否重新加载新内容。
在当前注册界面下，只有用户在自定义情况下，才会导致需要ajax动态生成的内容的更替，其他情况下（用户前后点击），是不会重新加载新内容的，此方法需要配合下面
build_condition()方法使用。
6.输出 需要采取动态生成表单数据的页面条件
/**
* 输出 需要采取动态生成表单数据的页面 条件
* @param i 特定页码
* @returns {boolean}
*/
$.fn.gcxRegslideForm.build_condition = function( i )
{
//在第2页 和 第4页 采取动态生成表单数据，需要灵活变动，页面随着操作会随时变化
return ajaxPage = i == 2 || i == 4;
};7.页面加载后自定义调整
自定义修改：
/**
* 自定义修改特定页面 内容
* @param opts 传入参数对象opts
* @param i 特定页码
*/
$.fn.gcxRegslideForm.customChange = function( opts, i )
{
/*增加自定义修改*/
};/**
* 自定义创建扩展操作
* @param opts 传入参数对象opts
* @param i 特定页码
*/
$.fn.gcxRegslideForm.customBuild = function( opts, i )
{
/*增加自定义创建*/
};/**
* 自定义 表单验证错误信息模块
* @param ele 特定页码
* @param ele2 内容列表数组当前序列
* @param opts 传入参数对象opts
* @param i 特定页码
* @param j 内容列表数组当前序列
*/
$.fn.gcxRegslideForm.errorTxtStyle = function( ele, ele2, opts, i, j )
{
/*调整错误信息*/
};/**
* 当标题需要随着用户操作选择而动态变更时，此时用户设定的插件标题为数组，需要对其进行判断并且变更，公共拓展方法，可自行操作。
* @param opts
* @param titArr 标题数组
*/
$.fn.gcxRegslideForm.custom_multipleTit = function( opts, titArr )
{
/*增加 在特定条件下选择不同的插件标题*/
/*例如：*/
var reg_tit = $( '#' + opts.reg_container + ' #' + opts.reg_HeadTit + '' );
if( $( "input[name='objective']:checked" ).val() == 'I want to post recruiting/enrollment/coopration information' )
reg_tit.html( titArr[ 1 ] );
else reg_tit.html( titArr[ 0 ] );
};七、additional-methods 新增验证方法
/**
* 验证输入id方法
* 判断输入框输入是否正确
*/
$.validator.addMethod( "isId", function( value, element )
{
var regular = /^[a-zA-Z0-9_]{4,16}$/;
return this.optional( element ) || (regular.test( value ));
}, "只能是英文字母，数字和下划线，长度4到20" );
/**
* 验证输入Password方法
* 判断输入框输入是否正确
*/
$.validator.addMethod( "isPassword", function( value, element )
{
var regular = /((?=.*[a-z])(?=.*\d)|(?=[a-z])(?=.*[#@!~%^&*.])|(?=.*\d)(?=.*[#@!~%^&*.]))[a-z\d#@!~%^&*.]{6,20}/i;
return this.optional( element ) || (regular.test( value ));
}, "密码由6到20位字母数字特殊符号构成，不能是纯数字、纯字母、纯特殊字符" );
/**
* 验证输入Name方法
* 判断输入框输入是否正确
*/
$.validator.addMethod( "isName", function( value, element )
{
var regular = /^[a-zA-Z0-9_*-]{4,16}$/;
return this.optional( element ) || (regular.test( value ));
}, "只能是英文字母，数字和下划线*-，长度4到20" );
/**
* 验证输入Mobilephone方法（国内手机）
* 判断输入框输入是否正确
*/
$.validator.addMethod( "isMobilephone", function( value, element )
{
var regular = /^((\(\d{3}\))|(\d{3}\-))?13[0-9]\d{8}|14[7]\d{8}|15[89]\d{8}|18[0-9]\d{8}$/;
return this.optional( element ) || (regular.test( value ));
}, "请输入正确的手机号码" );
/**
* 验证输入tel固定电话方法（国内固定电话）
* 判断输入框输入是否正确
*/
$.validator.addMethod( "isTel", function( value, element )
{
var regular = /^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$/;
return this.optional( element ) || (regular.test( value ));
}, "请输入正确的固定电话,例如：XXXX-XXXXXXXX，XXXXXXX。" );
/**
* 验证输入fax传真方法
* 判断输入框输入是否正确
*/
$.validator.addMethod( "isFax", function( value, element )
{
var regular = /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
return this.optional( element ) || (regular.test( value ));
}, "请输入正确的传真,例如：+123 -999 999 ； +123-999 999" );
/**
* 验证输入Birth方法
* 判断输入框输入是否正确
*/
$.validator.addMethod( "isBirth", function( value, element )
{
var regular = /^((?:19|20)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/;
return this.optional( element ) || (regular.test( value ));
}, "请输入正确的出生日期(Example:1990-09-16)" );
/**
* 验证输入Email方法
* 判断输入框输入是否正确
*/
$.validator.addMethod( "isEmail", function( value, element )
{
var regular = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
return this.optional( element ) || (regular.test( value ));
}, "请输入正确的邮箱" );
/**
* 验证输入Carded方法
* 判断输入框输入是否正确
*/
$.validator.addMethod( "isCarded", function( value, element )
{
var regular = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/;
return this.optional( element ) || (regular.test( value ));
}, "请输入正确的身份证" );
/**
* 验证输入QQ方法
* 判断输入框输入是否正确
*/
$.validator.addMethod( "isQQ", function( value, element )
{
var regular = /^[1-9][0-9]{4,14}$/;
return this.optional( element ) || (regular.test( value ));
}, "请输入正确的QQ号" );
/**
* 验证网址
* 判断输入框输入是否正确
*/
$.validator.addMethod( "isWebsite", function( value, element )
{
var regular = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|[Ww]{3}.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
return this.optional( element ) || (regular.test( value ));
}, "请输入正确的网址" );八、jquery-validate 支持
插件导入以及内容和样式导入完毕后，还需要引入 jquery-validate 并使用，本插件已经合并相关代码，至于 jquery-validate 的使用方法自行百度，这里不再叙述。
九、效果图
十、常见问题及注意事项
1.使用者输入的自定义表单内容和自定义表单样式请严格按照示例格式输入，且注意编号是否和步骤编号对应，否则可能造成不能正确获取相关参数。
2.插件位置参数值大小的调节的效果相对于整个注册页面的大小，故设置插件参数时，请按照顺序，从外向里，依次构建，以免反复调整。
3.每块注册表单生成完毕后，若需进行页面修改或者回调，请在后置拓展方法中增加相应改动。
4.本插件支持google chrome，firefox，safari，opera等主流版本，ie9及以上版本支持，ie8会造成表单提交验证失效，界面有略微显示错误，但插件换页点击跳转功能正常，但请谨慎选择应用到实际项目中，ie7及以下版本不支持本插件，请谅解。
十一、问题报告
若插件有使用问题或者需完善之处，还望指正，请邮件至 sina771401093@sina.com，或微信 lensgcx 告知。
十二、版权
Copyright (c) 2011 gaocangxiong（gcx/西兰花的春天）. All rights reserved.
修改/转载 请注明
扫一扫
4927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
