form 表单信息获取

简要描述：

• 获取表单配置信息
• v1.4.4 表单提交增加验证码功能（具体见下文 通用表单 HTML示例）

语法：

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

常用属性：

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

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

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 的属性：

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示例:(通用表单，可以直接复制使用)

<script>
    (function () {
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = "/plugins/layui-v2.5.6/css/layui.css";
        document.head.prepend(link);
    })();
</script>
<script src="/plugins/layui-v2.5.6/layui.all.js"></script>

{rrz: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}

    <!--验证码开始-->
    {if $form.is_verify_code}
    <div class="layui-form-item">
        <label class="layui-form-label">验证码<font color="red">*</font></label>
        <div class="layui-input-block">
            <input class="layui-input" name="verify" placeholder="请输入验证码" lay-verify="required" lay-reqText="验证码不能为空"/>
            <img {$form.verifyData|raw} style="position: absolute;right: 1px;top: 1px;height: 36px;">
        </div>
    </div>
    {/if}
    {$form.hidden|raw}
    <!--验证码结束-->

    <div class="layui-form-item">
        <button class="layui-btn layui-btn-normal" lay-submit="" type="submit" style="width: 100%;background:#1474d5;">立即提交</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>
{/rrz:form}