第十三课：人人站模板开发（form 表单信息获取）

简要描述：

• 获取表单配置信息

语法：

{rrz:form id='1'}
<!--html内容-->
{/rrz:form}

常用属性：

参数名	类型	默认值	必须	说明
id	string/int	0	是	表单id

• 当id=’search’ 时 输出查询表单信息
• 标签范围内 $form 变量存放表单信息

id=’search’ 时 $form 的属性：

值	说明	代码
action	表单提交地址	{$form.action}
type	查询类型（article：文章搜索、item:产品搜索）	{$form.type}

HTML示例:

{rrz:form id="search"}
<form action="{$form.action}">
    <input type="hidden" name="t" value="{$form.type}">
    <input class="input" type="text" name="q" placeholder="请输入关键字"/>
    <input type="submit" value="" class="btn icon">
</form>
{/rrz:form}

id 等于数值时 $form 的属性：

值	说明	代码
title	表单名称	{$form.title}
action	表单提交地址	{$form.action}
config	表单配置信息	{$form.config}

config 的数据示例：

[
    {
        "type":"text",
        "name":"姓名",
        "required":"1"
    },
    {
        "type":"text",
        "name":"电话",
        "required":"1"
    },
    {
        "type":"textarea",
        "name":"您的问题",
        "required":"0"
    },
    {
        "type":"radio",
        "name":"单选",
        "required":"0",
        "option":["选项1","选项2"]
    },
    {
        "type":"checkbox",
        "name":"多选",
        "required":"1",
        "option":["选项1","选项2","选项3"]
    }
]

HTML示例:(通用表单，可以直接复制使用)

<link rel="stylesheet" href="/plugins/layui-v2.5.6/css/layui.css">
<script src="/plugins/layui-v2.5.6/layui.all.js"></script>

{form id='1'}
<form class="layui-form layui-form-pane" action="{$form.action}" method="post" style="max-width: 750px;margin: auto;">
    {foreach $form.config as $key=>$item }
    {if $item.type=='text'}
    <div class="layui-form-item">
        <label class="layui-form-label">{$item.name} {if $item.required}<font color="red">*</font>{/if}</label>
        <div class="layui-input-block">
            <input class="layui-input" name="{$item.name}" placeholder="请输入{$item.name}" lay-verify="{$item.required?'required':''}" lay-reqText="{$item.name}不能为空"/>
        </div>
    </div>
    {elseif $item.type=='textarea'/}
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">{$item.name} {if $item.required}<font color="red">*</font>{/if}</label>
        <div class="layui-input-block">
            <textarea class="layui-textarea" name="{$item.name}" placeholder="请输入{$item.name}" maxlength="300" lay-verify="{$item.required?'required':''}" lay-reqText="{$item.name}不能为空"></textarea>
        </div>
    </div>
    {elseif $item.type=='radio'/}
    <div class="layui-form-item">
        <label class="layui-form-label">{$item.name} {if $item.required}<font color="red">*</font>{/if}</label>
        <div class="layui-input-block">
            <select name="{$item.name}">
                {foreach $item.option as $k=>$option}
                <option value="{$option}">{$option}</option>
                {/foreach}
            </select>
        </div>
    </div>
    {elseif $item.type=='checkbox'/}
    <div class="layui-form-item" pane>
        <label class="layui-form-label">{$item.name} {if $item.required}<font color="red">*</font>{/if}</label>
        <div class="layui-input-block">
            {foreach name="item['option']" item="option" key="k"}
            <input type="checkbox" name="{$item.name}[]" data-name="{$item.name}" lay-verify="{$item.required?'requiredcheckbox':''}" value="{$option}" title="{$option}"/>
            {/foreach}
        </div>
    </div>
    {/if}
    {/foreach}
    <div class="layui-form-item">
        <button class="layui-btn" lay-submit="" type="submit" style="width: 100%;background:#67b306;">立即提交</button>
    </div>
</form>
<script>
    (function () {
        layui.form.verify({
            requiredcheckbox: function (value, item) {
                var vform = $(item).closest('form');
                if (!vform) return true;
                var name = $(item).data('name');
                return $('input[type=checkbox]' + (name ? '[name="' + name + '"]' : ''), vform).is(function (index) {
                    return this.checked == true;
                }) ? '' : '请至少选择一项' + name;
            }
        });
        layui.form.render();
    })();
</script>
{/form}

 

 转自：www.rrzcms.com/