jQuery MiniUI 快速入门：表单开发（四）

表单开发包括：布局、验证、加载、提交、清除、重置等。

效果图如下：

表单布局

使用HTMLTable标签实现任意丰富的表单布局：

<tableclass="form-table"border="0"cellpadding="1"cellspacing="2">

<tr>

<tdclass="form-label"style="width:60px;">姓名：</td>

<tdstyle="width:150px">

<inputname="name"class="mini-textbox"/>

</td>

<tdclass="form-label"style="width:60px;">地址：</td>

<tdstyle="width:150px">

<inputname="addr"class="mini-textbox"/>

</td>

</tr>

<tr>

<tdclass="form-label">性别：</td>

<td>

<inputname="gender"class="mini-radiobuttonlist"data="[{id:1,text:'男'},{id:2,text:'女'}]"/>

</td>

<tdclass="form-label">年龄：</td>

<td>

<inputname="age"class="mini-spinner"/>

</td>

</tr>

<tr>

<tdclass="form-label">备注：</td>

<tdcolspan="3">

<inputname="remarks"class="mini-textarea"style="width:343px;height:60px;"/>

</td>

</tr>

</table>

数据验证

监听处理控件的"validation"事件，自定义验证规则和错误描述信息：

<inputid="username"name="username"

onvalidation="onUserNameValidation"class="mini-textbox"required="true"/>

functiononUserNameValidation(e){

if(e.isValid){

if(isEmail(e.value)==false){

e.errorText="必须输入邮件地址";

e.isValid=false;

}

}

}

使用mini.Form组件对多个控件进行验证：

varform=newmini.Form("#form1");

form.validate();

加载表单

$.ajax({

url:"../data/FormService.aspx?method=LoadData",

type:"post",

success:function(text){

vardata=mini.decode(text);//反序列化成对象

form.setData(data);//设置多个控件数据

}

});

提交表单

//提交表单数据

varform=newmini.Form("#form1");

vardata=form.getData();//获取表单多个控件的数据

varjson=mini.encode(data);//序列化成JSON

$.ajax({

url:"../data/FormService.aspx?method=SaveData",

type:"post",

data:{submitData:json},

success:function(text){

alert("提交成功，返回结果:"+text);

}

});

清除表单

form.clear();

重置表单

form.reset();

参考示例：

表单布局

表单控件

弹出面板：本页面

弹出面板：子页面

编辑表单：行内编辑

验证规则

表单：验证

表单：文本显示

表单：组合验证

表单：弹出框验证