表单结构

基本表单结构

<form class="form" action="javascript:;">
    <fieldset>
        <legend>form title</legend>
        <!-- first form row -->
        <div class="form-row first">
            <label>row label</label>
            <div class="form-cell">
                <!--here is your form cell content-->
            </div>
        </div>
        <!-- more form rows ... -->

        <!-- last form row -->
        <div class="form-row last">
            <label>row label</label>
            <div class="form-cell">
                <!--here is your form cell content-->
            </div>
        </div>
    </fieldset>
</form>

• 如果需要表单标题，则使用legend标签给出；
• 一个表单中至少包含一个fieldset;
• 一个fieldset中至少包含一个表单行（form-row);
• 每一个表单行包含两个部分：标签（label）和表单格（form-cell）;
• 表单格的内容一般由ui控件创建，也可以自行指定HTML内容；
• 分别给表单第一行和最后一行加上first 和 last的class；
• 所有表单需遵循这样的一个结构.

四种呈现样式

表单共有四种呈现样式：

1. normal，用得最多的默认表单样式。使用基本的表单结构即可。
2. single-col，单列呈现样式。在表单上加上 single-col class即可。
3. large，大表单呈现样式，一般用户登录框之类的。加上large class即可。
4. inline，单行呈现样式。加上inline class即可。

四种表单样式具体效果可参见 http://www.kuaizhan.com/ui/form

创建一个表单行 （form-row）

使用接口 ui.createRow 可以动态地创建一个表单行

参数（以JS Object形式给出）：
    title   表单行的标签文字
    content 表单格的HTML内容
    tip     表单输入提示文字
    _last_  是否是最后一行 true|false
    class   额外的样式class，会添加到表单行样式列表最后

实例代码：

fieldset.append(ui.createRow({
    title: "标题",
    tip: "可由中文、英文或者数字组成，最长12个字符",
    content: ui.text.create({
        name: "name",
        value: d.name,
        placeholder: "请输入页面名称"
    })
}));

效果图：

创建一个可选表单行

使用ui 控件 ui.switchrow可创建一个带checkbox可选的表单行：

参数（以JS Object形式给出）：
    name    控制checkbox选中状态的input name属性
    value   控制checkbox选中状态的input的值，true表示选中，false为不选中
    tip     表单输入提示文字
    title   表单行的标签文字
    content 表单格的HTML内容
    _last_  是否是最后一行 true|false
    class   额外的样式class，会添加到表单行样式列表最后

实例代码：

var form = $("#form"), fieldset = form.find("fieldset");

fieldset.append(ui.switchrow.create({
    title: "使用背景图",
    name: "usebgimage",
    value: d.usebgimage,
    content: ui.render(tpl_bgimage, d)
}));

//记得加上这句
ui.switchrow.init(w);

效果图：

表单验证结果标识

验证错误标识

使用ui.form.showError即可将某个表单行标注为验证错误

参数：
    $row    表单行jQuery DOM对象
    msg     错误消息

代码实例：

var form = $("#form"), row, msg = "can not be empty.";

//locate the row
row = ui.form.findRow(form, "password");
//show error msg
ui.form.showError(row, msg);

效果图：

表单验证正确提示

使用 ui.form.showRight即可将某个表单行标注为验证正确

参数：
    $row    表单行jQuery DOM对象
    msg     验证正确消息【可选】

实例代码：

var form = $("#form"), row, msg = "can not be empty.";

//locate the row
row = ui.form.findRow(form, "password");
//show right msg
ui.form.showRight(row);

效果图：