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

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

效果图如下：


表单布局
使用HTML Table标签实现任意丰富的表单布局：
<table class="form-table" border="0" cellpadding="1" cellspacing="2">
    <tr>
        <td class="form-label" style="width:60px;">姓名：</td>
        <td style="width:150px">
            <input name="name" class="mini-textbox" />
        </td>
        <td class="form-label" style="width:60px;">地址：</td>
        <td style="width:150px">
            <input name="addr" class="mini-textbox" />
        </td>
    </tr>
    <tr>
        <td class="form-label">性别：</td>
        <td >
            <input name="gender" class="mini-radiobuttonlist" data="[{id: 1, text: '男'}, {id: 2, text: '女'}]"/>
        </td>
        <td class="form-label">年龄：</td>
        <td >
            <input name="age" class="mini-spinner" />
        </td>
    </tr>
    <tr>
        <td class="form-label">备注：</td>
        <td colspan="3" >
            <input name="remarks" class="mini-textarea" style="width:343px;height:60px;"/>
        </td>       
    </tr>
</table>

数据验证
监听处理控件的"validation"事件，自定义验证规则和错误描述信息：
<input id="username" name="username"
    onvalidation="onUserNameValidation" class="mini-textbox" required="true" />

function onUserNameValidation(e) {
    if (e.isValid) {
        if (isEmail(e.value) == false) {
            e.errorText = "必须输入邮件地址";
            e.isValid = false;
        }
    }
}
使用mini.Form组件对多个控件进行验证：
var form = new mini.Form("#form1");
form.validate();

加载表单
$.ajax({
    url: "../data/FormService.aspx?method=LoadData",
    type: "post",
    success: function (text) {
        var data = mini.decode(text);   //反序列化成对象
        form.setData(data);             //设置多个控件数据
    }
});

提交表单
//提交表单数据
var form = new mini.Form("#form1");           
var data = form.getData();      //获取表单多个控件的数据
var json = 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();

参考示例：

    表单布局
    表单控件
    弹出面板：本页面
    弹出面板：子页面
    编辑表单：行内编辑
    验证规则
    表单：验证
    表单：文本显示
    表单：组合验证
    表单：弹出框验证