简要描述:
语法:
{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}