form 表单提交
使用sword自带的表单提交包括以下方法
| 方法 | 方法名 | 说明 |
|---|---|---|
$(id).validate({submitHandler:function(){}}) |
表单校验 | 表单校验通过后，会执行内部的submitHandler方法 |
sword.validate.func = function(value,element){} |
增加表单校验方法 | func的名字即为新增加的表单校验规则，可用于input/select等组件 |
$(id).swordFormGetData(data,options) |
一次性获取表单中的值 | 用于一次性上送前台参数 |
$(id).swordFormFillData(data,options) |
一次性填充表单中的值 | 用于将后台的值一次性填充到表单中 |
方法详细说明
$(id).validate()
参数主要为submitHandler字段，参数值为一个函数方法。当表单通过校验后，即会调用改方法。
$("#proform").validate({
submitHandler: function (form) {
// 此处的代码只有在表单校验通过时才会执行
}
})
sword.validate.func = function(value,element){}
该方法可以自定义一个校验规则，参数值为校验函数。其中入参value表示被校验对象的数值，element表示被校验对象。在html元素中的则通过swordValidateMethod属性制定该校验方法，swordValidateHint制定校验失败是的提示文字。
<sword:input id="ideavalite" swordValidateMethod="notempty" swordValidateHint="这个字段不能为空">
sword.validate.notempty = function(value,element){
var length = sword.trim(value,1).length; //去掉空格
return length > 0;
}
$(id).swordFormGetData(options)
该方法可以一次性获取表单中的值，用于提交表单数据。其中，options参数包含三个字段prefix(前缀),suffix(后缀)，exclude(排除某些字段)，表示根据这三个字段的规则，将form表单的数据的key值加工成你希望的个数，传递到后端。
// 例如，如果前台form表单的字段为edit_username,送到后端的字段需要变成myusername4select，那么
$(form).swordFormGetData({
prefix:'my',
exclude:'edit_',
suffix:'4select'
})
$(id).swordFormFillData(data,options)
该方法可以一次性将后端的数据填充到form表单内。其中data即为后端送过来的json数值，options的参数字段和上方的函数一致，即会将后端json中的key值加工成你希望的(form表单内的)的key值。
// 例如你后端json中的Key为username，你前端form表单内的key值为edit_username，那么
$(form).swordFormFillData(data,{
prefix:'edit_'
})
表单参数补充说明
- 可以在input标签或者select上增加required/maxlength/minlength属性已达到表单校验的目的。
- 由于select2/icheck控件内产生的值有一定特殊性，如果想直接进行表单提交，可以在其下方放置一个隐藏的input框，将input框的name属性和控件的swordName属性设置成，框架会自动将每次操作后的值插入到隐藏的input框内，提交到后台的key为隐藏的input框的name，不是控件的name(注意！)。
- Select2控件上送的值为option对应的value，多个以|分割。
- Check控件只会上送选择的value值，以|分割。
- Radio组件则只会上送选中的选项的value值。
<sword: form id="proform">
<sword: formTable id="table_proform">
<tr>
<th width="15%" class="must">项目名称</th>
<td width="35%" colspan="3">
<sword: input id="projName" placeholder="请输入" number="true" required="true" maxlength="10" minlength="2" />
</td>
</tr>
<tr>
<th width="15%">
联系人员
</th>
<td width="35%">
<sword: input id="linkMan" placeholder="请输入" />
</td>
<th width="15%">
联系方式
</th>
<td width="35%">
<sword: input id="linkPhone" placeholder="请输入" />
</td>
</tr>
<tr>
<th width="15%" class="must">
所属机构
</th>
<td width="35%">
<sword: row width="6">
<sword: select>
<option selected="selected" value="12000000">浙江省分行</option>
<option value="12020000">杭州营业部</option>
<option value="12030000">温州分行</option>
</sword: select>
</sword: row>
<sword: row width="5" offset="1">
<sword: select id="DPTNO">
<option selected="selected" value="1">二级菜单1</option>
<option value="2">二级菜单2/option>
<option value="3">二级菜单3</option>
</sword: select>
</sword: row>
</td>
<th width="15%">
立项类型
</th>
<td width="35%">
<sword: select id="lxlx" type="multiple" maximumSelectionLength="2" swordFormName="lx">
<option value="12000000">浙江省分行</option>
<option value="12020000">杭州营业部</option>
<option value="12030000">温州分行</option>
</sword: select>
<input name="lx" hidden />
</td>
</tr>
<tr>
<th width="15%">
评分
</th>
<td width="35%" colspan="3">
<sword: select id="i_eval_q" type="barrating" name="pingfeng">
<option value="1">1分</option>
<option value="2">2分</option>
<option value="3" selected="selected">3分</option>
<option value="4">4分</option>
<option value="5">5分</option>
</sword: select>
</td>
</tr>
<tr>
<th width="15%">
计划发起日期
</th>
<td width="35%">
<sword: input id="starttime" type="datetime" placeholder="请选择发起日期" startView="4" minView="2" format="yyyy-mm-dd" autoclose="false"
/>
</td>
<th width="15%">
计划完成日期
</th>
<td width="35%">
<sword: input id="endtime" type="datetime" placeholder="请选择完成日期" />
</td>
</tr>
<tr>
<th width="15%">
项目简介
</th>
<td width="35%" colspan="3">
<sword: textarea id="projDesc" required="true"></sword: textarea>
</td>
</tr>
<tr>
<th width="15%">
多选按钮
</th>
<td width="35%">
<sword: check chname="多选1|多选2|多选3" name="choose1|choose2|choose3" checked="true|false|true" value="duoxuan1|duoxuan2|duoxuan3"
swordFormName="duox" />
<input name="duox" value="" hidden />
</td>
<th width="15%">
单选按钮
</th>
<td width="35%">
<sword: radio chname="单选1|单选2|单选3" name="radiotest" checked="1" value="danxuan1|danxuan2|danxuan3" swordFormName="danx" />
<input name="danx" value="" hidden />
</td>
</tr>
<tr>
<th>自定义校验规则</th>
<td>
<sword:input id="ideavalite" swordValidateMethod="notempty" swordValidateHint="这个字段不能为空">
</td>
</tr>
<tr>
<th width="15%" class="must">
立项附件
</th>
<td width="35%" colspan="3">
<sword: row width="4">
<sword: button id="applicationFrom" className="file">应用方案书</sword: button>
</sword: row>
<sword: row width="4">
<sword: button id="feasiblePlan" className="file">可行性方案</sword: button>
</sword: row>
<sword: row width="4">
<sword: button id="technologyEvaluation" className="file">技术评估方案</sword: button>
</sword: row>
</td>
</tr>
<tr>
<td colspan="4" class="footer">
<sword: button type="submit" id="submit" icon="location-arrow" className="success">提交</sword: button>
<sword: button type="reset" className="white" icon="refresh">清空</sword: button>
</td>
</tr>
</sword: formTable>
</sword: form>
//初始化表单插件
sword.initial();
//自定义新的校验规则
sword.validate.notempty = function(value,element){
var length = sword.trim(value,1).length; //去掉空格
return length > 0;
}
//表单校验
$("#proform").validate({
submitHandler: function (form) {
// 此处的代码只有在表单校验通过时才会执行
//通过swordFormGetData方法获取表格参数
var updateValue = $(form).swordFormGetData();
console.log(updateValue);
$.swordajax({
type: "GET",
url: "<%=pathhere%>/json/data.json",
data: updateValue, //传入组装的参数
dataType: "json",
selector: "#submit",
success: function (result) {
Lobibox.alert('success', {
msg: '工单完成成功！',
callback: function ($this, type) { }
});
}
});
}
})
//从后台取值填充到表格中
function getValueFormBack(){
$.swordajax({
url:url,
data:data,
success:function(result){
$("#proform").swordFormFillData(result.response);
}
});
}
//取出表中的值上送到后台
function getFormValue(){
var formData = $("#proform").swordFormGetData();
}