# <stl:form> 表单

<stl:form
  name="表单名称"
  type="表单模板"
  height="高度"
  submitName="提交表单的JS函数名称"
  onBeforeSend="提交表单发送前执行的JS代码"
  onSuccess="提交表单成功后执行的JS代码"
  onComplete="提交表单结束后执行的JS代码"
  onError="提交表单失败后执行的JS代码"
  successMessage="提交表单成功后显示的提示文字"
>
</stl:form>

# 说明

通过 stl:form 标签在模板中实现表单功能，如果 <stl:form> 包含内嵌标签，系统将以自定义样式显示表单，否则将采用 type 属性中设置的表单模板显示表单。

# 子标签

下表显示此标签所有的子标签。

子标签	说明
stl:yes	表单提交成功时的显示模板
stl:no	表单提交失败时的显示模板

# 属性

属性	说明
name	表单名称
type	表单模板
height	高度
submitName	提交表单的 JS 函数名称
onBeforeSend	提交表单发送前执行的 JS 代码
onSuccess	提交表单成功后执行的 JS 代码
onComplete	提交表单结束后执行的 JS 代码
onError	提交表单失败后执行的 JS 代码
successMessage	提交表单成功后显示的提示文字

# name - 表单名称

表单名称是表单的标识，具有唯一性，如果不设置，默认为第一个表单的名称。

<stl:form name="表单名称"></stl:form>

# type - 表单模板

表单模板，如果不设置，默认为系统模板 submit。

<stl:form type="submit"></stl:form>

# height - 高度

表单模板显示高度，如果不设置，系统将在表单载入后自动计算并调整高度。

# submitName - 提交表单的 JS 函数名称

提交表单的 JS 函数名称，默认为 formSubmit。

# onBeforeSend - 提交表单发送前执行的 JS 代码

提交表单发送前执行的 JS 代码，可以在此验证表单格式。

onBeforeSend 可以为自定义函数，函数内返回 true 代表验证通过，系统将提交表单，返回 false 代表验证不通过，系统将不会提交表单。

# onSuccess - 提交表单成功后执行的 JS 代码

提交表单成功后执行的 JS 代码。

# onComplete - 提交表单结束后执行的 JS 代码

提交表单结束后执行的 JS 代码。

# onError - 提交表单失败后执行的 JS 代码

提交表单失败后执行的 JS 代码。

# successMessage - 提交表单成功后显示的提示文字

提交表单成功后显示的提示文字。

# 示例

# 使用系统模板显示提交表单

下面的例子使用系统模板显示 留言反馈 提交表单。

<stl:form name="留言反馈" type="submit"></stl:form>

# 使用系统模板显示表单数据

下面的例子使用系统模板显示 留言反馈 表单数据。

<stl:form name="留言反馈" type="list"></stl:form>

# 自定义表单提交样式

下面的例子显示自定义表单提交样式，使用 onBeforeSend 属性定义提交验证函数，并在函数内返回 true 。

<script>
    function validateForm(data) {
        var success = true;
        $('#myForm input').removeClass('error');
        $('#myForm textarea').removeClass('error');
        if (!data['Name']) {
            $('#myForm input[name="Name"]').addClass('error');
            success = false;
        }
        if (!data['Mobile']) {
            $('#myForm input[name="Mobile"]').addClass('error');
            success = false;
        }
        if (!data['Email'] || !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(data['Email'])) {
            $('#myForm input[name="Email"]').addClass('error');
            success = false;
        }
        if (!data['Content']) {
            $('#myForm textarea[name="Content"]').addClass('error');
            success = false;
        }
        return success;
    }
</script>

<stl:form name="留言反馈" id="myForm" onBeforeSend="validateForm">
    <ul>
        <li>
            <span>姓名：</span>
            <input type="text" name="Name" placeholder="请输入姓名">
        </li>
        <li>
            <span>电话：</span>
            <input type="text" name="Mobile" placeholder="请输入电话">
        </li>
        <li>
            <span>Email：</span>
            <input type="text" name="Email" placeholder="请输入Email">
        </li>
        <li>
            <span>反馈内容：</span>
            <textarea name="Content" placeholder="请输入反馈内容"></textarea>
        </li>
    </ul>
    <div>
        <button class="fnt_18" onclick="formSubmit()">提交</button>
    </div>
</stl:form>