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();

参考示例:

表单布局

表单控件

弹出面板:本页面

弹出面板:子页面

编辑表单:行内编辑

验证规则

表单:验证

表单:文本显示

表单:组合验证

表单:弹出框验证

相关推荐