代码演示

基本形式

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

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

代码演示

inline排列

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

获取select数据接口

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

验证示例

如果不想使用Form标签

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

API

Classes

UIForm

Events

“sourceCompleted jr-form自动获取sourceKey异步数据后触发”

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,jr-form-item按照inline-block排列
[options.data.sourcePath] string "data" => 获取到select数据后,读取json数据的路径
[options.data.labelSize] string | number "''" => 批量设置jr-form-item的labelSize,取值与jr-form-item的labelSize相同
[options.data.labelLineHeight] string | number "''" => 批量设置jr-form-item的labelLineHeight,取值与jr-form-item的labelLineHeight相同

“sourceCompleted jr-form自动获取sourceKey异步数据后触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象
result object 所有异步数据
← 日期选择 输入框 →