自定义表单提交代码

除了 使用表单模板 之外，我们还可以直接在模板中自定义表单提交代码，自定义表单提交代码可以使用我们希望的显示样式以及验证规则提交表单。

创建表单

接下来，我们将演示如何实现自定义表单提交代码功能，首先我们需要创建一个表单，表单可以任意取名，在本例中，我们取名 与我们进行沟通：

创建表单后，系统会自动创建四个字段（姓名、手机、邮箱以及留言），我们可以在字段管理界面中新增或修改字段，在本例中，我们保持系统创建的字段不变：

自定义提交代码

接下来，我们进入 显示管理 -> 模板管理，进入需要显示表单提交的模板，在本例中为 联系我们 模板：

在模板代码编辑界面添加自定义表单提交代码：

详细代码如下：

<stl:form name="与我们进行沟通">
    <div class="m2lxTs wow fadeInUp" data-wow-delay="0.2s">
        <strong>与我们进行沟通</strong>
        <p>可以提交信息给我们，我们收到信息后会尽快安排工作人员与您联系！</p>
    </div>
    <ul class="m2lxFm clearfix wow fadeInUp" data-wow-delay="0.3s">
        <li style="width: 30%;">
        <div class="m2lx_inx"><input placeholder="姓名" name="Name" type="text"></div>
        </li>
        <li style="width: 30%;">
        <div class="m2lx_inx"><input placeholder="手机" name="Mobile" type="text"></div>
        </li>
        <li style="width: 30%;">
        <div class="m2lx_inx"><input placeholder="邮箱" name="Email" type="text"></div>
        </li>
        <li>
        <div class="m2lx_inx"><textarea placeholder="留言内容" name="Content" cols="" rows=""></textarea></div>
        </li>
    </ul>
    <div class="m2lxBtnWpr wow fadeInUp" data-wow-delay="0.2s">
        <a href="javascript:;" onclick="formSubmit()" class="m2lxSubmit">立即提交</a>
    </div>
</stl:form>

以上代码中有两点需要特别注意：

第一，我们需要保证表单提交项的 name 名称与表单字段名称一致，如 姓名 提交项对应的 name 为 Name， 手机 提交项对应的 name 为 Mobile 等。

第二，我们需要在提交按钮中添加 onclick="formSubmit()" 点击事件，使得点击按钮能够触发提交表单方法。

保存模板后生成页面，我们可以看到前台表单页面显示：

在此输入文本并点击提交，页面将显示提交成功提示，后台表单数据中将显示前台提交的数据项。

自定义验证规则

通过以上操作，我们已经完成了表单创建以及自定义提交代码工作，美中不足的是，前台表单可以输入任意文本或不输入文本，点击提交页面均显示提交成功。

接下来我们需要将表单验证添加到自定义提交代码中。

我们在代码中增加错误CSS样式、验证Js函数以及表单的 id 与 onBeforeSend 属性：

<style>
    .error {border: 1px solid red !important;}
</style>
<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">
<div class="m2lxTs wow fadeInUp" data-wow-delay="0.2s">
    <strong>与我们进行沟通</strong>
    <p>可以提交信息给我们，我们收到信息后会尽快安排工作人员与您联系！</p>
</div>
<ul class="m2lxFm clearfix wow fadeInUp" data-wow-delay="0.3s">
    <li style="width: 30%;">
    <div class="m2lx_inx"><input placeholder="姓名" name="Name" type="text"></div>
    </li>
    <li style="width: 30%;">
    <div class="m2lx_inx"><input placeholder="手机" name="Mobile" type="text"></div>
    </li>
    <li style="width: 30%;">
    <div class="m2lx_inx"><input placeholder="邮箱" name="Email" type="text"></div>
    </li>
    <li>
    <div class="m2lx_inx"><textarea placeholder="留言内容" name="Content" cols="" rows=""></textarea></div>
    </li>
</ul>
<div class="m2lxBtnWpr wow fadeInUp" data-wow-delay="0.2s">
    <a href="javascript:;" onclick="formSubmit()" class="m2lxSubmit">立即提交</a>
</div>
</stl:form>

保存模板后生成页面，我们不输入文本，直接提交表单，表单将显示红色边框，提示必填项：

至此，自定义表单提交代码的工作就已经全部完成了，更多信息，可以参考 stl:form 表单标签。