登录 注册

NUI下表单开发

发布时间:Jun 12, 2019 10:27:14 AM 发布人:管理员


归属栏目: EOS开发


外部链接: 


关键字: 


归属栏目: EOS开发


文章来源: 


摘要: 

NUI下:表单开发

本文介绍如何利用NUI平台开发完成表单相关操作的开发,并且提供相关界面事例代码,方便开发人员入门学习。

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

效果图如下:

 

1、表单布局

使用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="nui-textbox" />

        </td>

        <td class="form-label" style="width:60px;">地址:</td>

        <td style="width:150px">

            <input name="addr" class="nui-textbox" />

        </td>

    </tr>

    <tr>

        <td class="form-label">性别:</td>

        <td >

            <input name="gender" class="nui-radiobuttonlist" data="[{id: 1, text: ''},{id: 2, text: ''}]"/>

        </td>

        <td class="form-label">年龄:</td>

        <td >

            <input name="age" class="nui-spinner" />

        </td>

    </tr>

    <tr>

        <td class="form-label">备注:</td>

        <td colspan="3" >

            <input name="remarks" class="nui-textarea" style="width:343px;height:60px;"/>

        </td>

    </tr>

</table>

2、数据验证

监听处理控件的"validation"事件,自定义验证规则和错误描述信息:

<input id="username" name="username" onvalidation="onUserNameValidation" class="nui-textbox" required="true" />

 

function onUserNameValidation(e) {

    if (e.isValid) {

        if (isEmail(e.value) == false){ 

            e.errorText = "必须输入邮件地址"; 

            e.isValid = false; 

        }

    }

}

使用nui.Form组件对多个控件进行验证:

var form = new nui.Form("#form1");

form.validate();

3、加载表单

nui.ajax({

    url: "org.gocom.components.nui.demo.TForm.loadForm.biz.ext",

    type: "post",

    contentType:"text/json",

    success: function (text){ 

        var data = nui.decode(text); //反序列化成对象 

        form.setData(data); //设置多个控件数据 

    }

});

4、提交表单

//提交表单数据

 

var form = new nui.Form("#form1");

var data = form.getData(); //获取表单多个控件的数据

var json = nui.encode(data); //序列化成JSON

nui.ajax({

    url: "org.gocom.components.nui.demo.TForm.saveForm.biz.ext",

    type: "post",

    contentType:"text/json",

    data:{ submitData: json },

    success: function (text){ 

        alert("提交成功,返回结果:" + text); 

    }

});

5、清除表单

form.clear();

6、重置表单

form.reset();

 


相关文章

返回