logo

iMAG移动应用开发指南

Form

表单控件

标签

标签名 描述 说明 子标签
form 表单标签 表单项都包含在form标签内 validation

属性

属性名 取值 描述
id String id编码
action URL 表单提交的地址
target String 表单提交后页面打开方式,其中
_self:当前窗口打开,默认值。
_blank:新窗口打开。
progress String 表单提交提示信息。可以用"|"分割,"|"前面的是title,后面的是content
multipart Boolean 是否用multipart方式提交表单,上传附件时和input-file控件结合使用,其中,
true:使用multipart方式提交表单。
false:不使用multipart,默认值。但如果form里有input-file控件则multipart会默认为true。
elements Array 包含所有表单项的数组,只读
onsubmit Javascript 表单提交时触发的脚本

方法

方法名 参数 返回值 描述
serialize() None String 得到一个将所有表单项value序列化组成的字符串,
username=%E6%90%9C%E7%B4%A2&password=123
validate() None Boolean 调用validation子标签的规则校验表单并返回结果,返回值:
true:校验成功
false:校验失败
submit() None None 提交表单信息
submit(success:Function, error:Function) success:表单提交成功之后的回调函数
error:表单提交失败之后的回调函数
None 提交表单信息

控件详解

● 用Sumbit按钮提交表单

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
       <title>
            <center>
                <label>用Sumbit按钮提交表单</label>
            </center>
        </title>
        <content draggable="true">
            <form id="form" action="http://www.imagapp.com/download/data/form_submit_ret.jsp" progress="提交表单|正在提交表单,请稍后...">
                <list type="group">
                    <item style="col-width:60,*">
                        <col>
                           <row><label>用户名</label></row>
                        </col>
                        <col>
                           <row>
                               <input type="text" name="username" value="terry"/>
                           </row>
                        </col>
                    </item>
                    <item style="col-width:60,*">
                        <col>
                           <row><label>密码</label></row>
                        </col>
                        <col>
                           <row>
                               <input type="password" name="password" value="123"/>
                           </row>
                        </col>
                    </item>
                    <item>
                        <row><input type="submit" style="width:100;align:center" value="提交"/></row>
                    </item>
                </list>
             </form>
        </content>
    </page>
</imag>

后台form_submit_ret.jsp代码:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% 
    String username = request.getParameter("username");
    String password = request.getParameter("password");
%>
<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
         <title>
             <center>
                 <label>登录结果</label>
             </center>
         </title>
         <content draggable="true">
             <list type="group">
                <item>
                    <label>用户名:<%=username%></label>
                </item>
                <item>
                    <label>密码:<%=password%></label>
                </item>
                <% if ("terry".equals(username) && "123".equals(password)) { %>
                <item>
                    <label style="color:blue" onclick="$page.close()">登录成功</label>
                    <button onclick="$page.close()">关闭</button>
                </item>
                <% } else { %>
                <item>
                    <label style="color:red">登录失败</label>
                </item>
                <% } %>
             </list>
         </content>
   </page>
</imag>

用Submit按钮提交表单,在后台接收表单数据之后返回下一个页面的xml,注意此时如果返回的不是符合iMAG规范的xml页面会提示XML格式错误。 因此Submit按钮提交仅适用于“本地开发”和“在线应用”的情况,“在线开发”和“离线应用”因为都是手机本地xml页面文件,要使用submit(success:Function, error:Function)方法提交表单数据。

● 用sumbit()方法提交

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        function submitForm() {
            $('form').submit();
        }
    ]]>
    </script> 
    <page>
       <title>
            <center>
                <label>用sumbit()方法提交</label>
            </center>
        </title>
        <content draggable="true">
            <form id="form" action="http://www.imagapp.com/download/data/form_submit_ret.jsp" progress="提交表单|正在提交表单,请稍后...">
                <list type="group">
                    <item style="col-width:60,*">
                        <col>
                           <row><label>用户名</label></row>
                        </col>
                        <col>
                           <row>
                               <input type="text" name="username" value="terry"/>
                           </row>
                        </col>
                    </item>
                    <item style="col-width:60,*">
                        <col>
                           <row><label>密码</label></row>
                        </col>
                        <col>
                           <row>
                               <input type="password" name="password" value="123"/>
                           </row>
                        </col>
                    </item>
                    <item>
                        <row>
                            <button onclick="submitForm();" style="width:100;align:center">提交</button>
                        </row>
                    </item>
                </list>
             </form>
        </content>
    </page>
</imag>

不带参数的sumbit()方法提交表单效果和Submit按钮相同,仅适用于“本地开发”和“在线应用”的情况,“在线开发”和“离线应用”要使用带回调的submit(success:Function, error:Function)提交表单数据。

● 用sumbit()方法提交并回调

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        function submitForm() {
            $('form').submit(function(data) {
                var obj = JSON.parse(data);
                hint(obj.message);
                $page.close();
            }, function(error) {
                hint('提交失败!');
            });
        }
    ]]>
    </script> 
    <page>
       <title>
            <center>
                <label>用sumbit()方法提交并回调</label>
            </center>
        </title>
        <content draggable="true">
            <form id="form" action="http://www.imagapp.com/download/data/form_submit_json.jsp" progress="提交表单|正在提交表单,请稍后...">
                <list type="group">
                    <item style="col-width:60,*">
                        <col>
                           <row><label>用户名</label></row>
                        </col>
                        <col>
                           <row>
                               <input type="text" name="username" value="terry"/>
                           </row>
                        </col>
                    </item>
                    <item style="col-width:60,*">
                        <col>
                           <row><label>密码</label></row>
                        </col>
                        <col>
                           <row>
                               <input type="password" name="password" value="123"/>
                           </row>
                        </col>
                    </item>
                    <item>
                        <row><button onclick="submitForm();" style="width:100;align:center">提交</button></row>
                    </item>
                </list>
             </form>
        </content>
    </page>
</imag>

后台form_submit_json.jsp代码:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% 
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    String code;
    String message;
    if ("terry".equals(username) && "123".equals(password)) {
	    code = "1";
	    message = "登录成功";
    } else {
	    code = "0";
	    message = "登录失败";
    }
%>
{
  "code": "<%=code%>",
  "message": "<%=message%>"
}

带回调的submit()方法提交表单的过程类似于Ajax,“本地开发”、“在线开发”、“在线应用”、“离线应用”都可以使用带回调的submit()来提交表单,然后解析服务器返回的json数据,最后通过$page.close()或$page.open()方法来控制页面跳转。

上面的例子中返回的JSON数据是拼串得到的,但如果数据里有特殊字符容易有错误,所以实际开发后台程序时要通过jsonlib等库来生成返回的json数据。

提交失败时会回调error:Function并返回error,error的取值:
timeout:连接超时。
HTTP状态码:401,402,403,404,...500,501,502,503...。

● 表单控件遍历(elements)

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        function selectAll() {
            var elements = $('form').elements;
            for (var i = 0; i < elements.length; i++) {
                var element = elements[i];
                if (element instanceof CheckBox) {
                    element.checked = true;
                }
            }
        }
        
        function unselectAll() {
            var elements = $('form').elements;
            for (var i = 0; i < elements.length; i++) {
                var element = elements[i];
                if (element instanceof CheckBox) {
                    element.checked = !element.checked;
                }
            }
        }
    ]]>
    </script> 
    <page>
       <title>
            <center>
                <label>表单控件遍历(elements)</label>
            </center>
        </title>
        <content draggable="true">
            <form id="form">
                <list type="group">
                    <item>
                        <row><checkbox>复选框1</checkbox></row>
                    </item>
                    <item>
                        <row><checkbox>复选框2</checkbox></row>
                    </item>
                    <item>
                        <row><checkbox>复选框3</checkbox></row>
                    </item>
                    <item>
                        <row><button onclick="selectAll();">全选</button><button onclick="unselectAll();">反选</button></row>
                    </item>
                </list>
             </form>
        </content>
    </page>
</imag>

● 表单数据序列化(serialize)

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        function submitForm() {
            var form = $('form');
            $http.post(form.action, form.serialize(), function(data) {
                var ret = JSON.parse(data);
                hint(ret.message);
            });
        }
    ]]>
    </script> 
    <page>
       <title>
            <center>
                <label>表单数据序列化(serialize)</label>
            </center>
        </title>
        <content draggable="true">
            <form id="form" action="http://www.imagapp.com/download/data/form_serialize_ret.jsp" target="_blank" progress="提交表单|正在提交表单,请稍后...">
                <list type="group">
                    <item style="col-width:60,*">
                        <col>
                           <row><label>用户名</label></row>
                        </col>
                        <col>
                           <row>
                               <input type="text" name="username" value="terry"/>
                           </row>
                        </col>
                    </item>
                    <item style="col-width:60,*">
                        <col>
                           <row><label>密码</label></row>
                        </col>
                        <col>
                           <row>
                               <input type="password" name="password" value="123"/>
                           </row>
                        </col>
                    </item>
                    <item>
                       <row>
                          <button onclick="submitForm();" style="width:100;align:center">提交</button>
                       </row>
                    </item>
                </list>
             </form>
        </content>
    </page>
</imag>

● 表单验证方法(validate)

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        function submitForm() {
            var form = $('form');
            if (form.validate()) {
                form.submit(function() {
                    hint('提交成功');
                    $page.close(-1);
                }, function() {
                    hint('提交失败!');
                });
            }
        }
    ]]>
    </script> 
    <page>
       <title>
            <center>
                <label>表单验证方法(validate)</label>
            </center>
        </title>
        <content draggable="true">
            <form id="form" action="http://www.imagapp.com/download/data/form_submit_ret.jsp" progress="提交表单|正在提交表单,请稍后...">
                <list type="group">
                    <item style="col-width:60,*">
                        <col>
                           <row><label>用户名</label></row>
                        </col>
                        <col>
                           <row>
                               <input type="text" name="username" value=""/>
                           </row>
                        </col>
                    </item>
                    <item style="col-width:60,*">
                        <col>
                           <row><label>密码</label></row>
                        </col>
                        <col>
                           <row>
                               <input type="password" name="password" value=""/>
                           </row>
                        </col>
                    </item>
                    <item>
                        <row><button onclick="submitForm();" style="width:100;align:center">提交</button></row>
                    </item>
                </list>
                <validation inputName="username">
                    <presence errorMessage="用户名不能为空" />
                </validation>
                <validation inputName="password">
                    <presence errorMessage="密码不能为空" />
                </validation>
            </form>
        </content>
    </page>
</imag>

调用form.validte()方法校验表单,validate()会使用validation标签定义的规则来进行校验。

● 记住表单数据

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
       <title>
            <center>
                <label>记住表单数据</label>
            </center>
        </title>
        <content draggable="true">
            <form id="form" action="http://www.imagapp.com/download/data/form_submit_ret.jsp" progress="提交表单|正在提交表单,请稍后...">
                <list type="group">
                    <item style="col-width:60,*">
                        <col>
                           <row><label>用户名</label></row>
                        </col>
                        <col>
                           <row>
                               <input type="text" name="username" value="terry" remember="true"/>
                           </row>
                        </col>
                    </item>
                    <item style="col-width:60,*">
                        <col>
                           <row><label>密码</label></row>
                        </col>
                        <col>
                           <row>
                               <input type="password" name="password" value="123"/>
                           </row>
                        </col>
                    </item>
                    <item>
                        <row><input type="submit" style="width:100;align:center" value="提交" remember="true"/></row>
                    </item>
                </list>
             </form>
        </content>
    </page>
</imag>

设置表单项的remember属性为true,提交表单时会自动记住表单数据,下次打开页面时自动显示。也可以通过$phone.localStorage()来存储表单数据,然后用Javascript脚本手动处理。

示例下载

点此下载form相关的示例代码:imag-form.zip