代码演示

基本形式

required写在form.item上和写在表单元素上验证效果是一样的, 但是如果label要显示红色星号,form.item上必须要有required属性

<ui.form ref="form">
    <form.item title="用户名" cols=6 row required>
        <ui.select required message="请选择用户名" />
    </form.item>
    <form.item title="密码" cols=6 row required message="请输入密码">
        <ui.input type="password" />
    </form.item>
    <ui.button title="验证" on-click={this.validate()} />
</ui.form>
var component = new NEKUI.Component({
    template: template,
    validate: function() {
        var $form = this.$refs.form;
        return $form.validate().success;
    }
});

代码演示

inline排列

<ui.form inline>
    <form.item title="用户名" row>
        <ui.select size="mdw" />
    </form.item>
    <form.item title="密码" row>
        <ui.input size="mdw" />
    </form.item>
</ui.form>
var component = new NEKUI.Component({
    template: template,
    data: {}
});

获取select数据接口

<ui.form service={api.selector} ref="formgroup">
    <form.item title="标题1" cols=12 sourceKey="importTypeList">
        <ui.select />
    </form.item>
    <form.item title="标题2" cols=12>
        <ui.input />
    </form.item>
</ui.form>
var component = new NEKUI.Component({
    template: template,
    data: {
        api: {
            selector: '../../data/selector.json'
        }
    }
});

验证示例

如果不想使用Form标签

<ui.form service={api.selector} ref="formgroup">
    <form.item title="标题1" cols=12 sourceKey="importTypeList">
        <ui.select />
    </form.item>
    <form.item title="标题2" cols=12>
        <ui.input />
    </form.item>
</ui.form>
var component = new NEKUI.Component({
    template: template,
    data: {
        api: {
            selector: '../../data/selector.json'
        }
    }
});

API

UIForm

Kind: global class
Extend: Validation

new UIForm()

Param Type Default Description
[options.data] object = 绑定属性
[options.data.service] string => 全站异步获取source的接口地址
[options.data.class] string => 扩展样式
[options.data.inline] boolean '' => 如果true,form.item按照inline-block排列
[options.data.sourcePath] string "data" => 获取到select数据后,读取json数据的路径
[options.data.labelSize] string | number "''" => 批量设置form.item的labelSize,取值与form.item的labelSize相同
[options.data.labelLineHeight] string | number "''" => 批量设置form.item的labelLineHeight,取值与form.item的labelLineHeight相同
← 按钮 输入框 →
想让文档更完善？ 来 GitHub 提个 PR 吧！