README

使用 GUMP 为 Craft CMS 3 联系表单插件提供简单的服务器端表单验证。

安装

将包添加到您的 composer.json 文件中

"isev-ltd/contact-form-validation": "~0.0.1"

或者通过命令行安装

composer require isev-ltd/contact-form-validation:0.0.*

进入您的 Craft CMS 3 管理区域 设置。在 系统 下点击 插件。

如果您还没有安装，请安装 Contact Form。然后安装 Contact Form Validation。

返回到 设置。在 插件 下进入 Contact Form 并确保您的 收件人 电子邮件已添加。

使用方法

创建一个名为 config/contact-form-validation.php 的配置文件

将 validate、filter 和 readableNames 键添加到返回的数组中。以下是一个示例配置文件。

<?php

return [
    'validate' => [
        'fromName' => 'required',
        'fromEmail' => 'required|valid_email',
        'phoneNumber' => 'required',
        'body' => 'required',
    ],
    'filter' => [
        'fromName' => 'trim',
        'fromEmail' => 'trim|sanitize_email',
        'phoneNumber' => 'trim',
        'body' => 'trim',
    ],
    'readableNames' => [
        'phoneNumber' => 'phone number',
        'fromEmail' => 'email',
        'fromName' => 'name',
        'body' => 'enquiry',
    ]
];

注意，fromName、fromEmail 和 subject 是默认字段。其他任何字段都将位于 message 数组中，与 Contact Form 插件相同。

示例表单

以下表单省略了默认的主题字段，并添加了电话号码。因为电话号码是自定义的，所以消息字段改为 message[body]。使用示例配置文件，所有字段都是必需的，并且电子邮件必须是有效的电子邮件地址。

    {% macro errorList(errors) %}
        {% if errors %}
            <ul class="errors">
                {% for error in errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endmacro %}
    {% from _self import errorList %}

    <form method="post" action="" accept-charset="UTF-8">
        {{ csrfInput() }}
        <input type="hidden" name="redirect" value="{{ "#{craft.request.url}?sent=1"|hash }}">
        <input type="hidden" name="action" value="contact-form/send">

        <div class="contact-form--layout">
            <div class="contact-form--row">
                <div class="contact-form--label">
                    <label for="from-name" class="">Your Name:</label>
                </div>
                <div class="contact-form--input">
                    <input id="from-name" type="text" class="" name="fromName" value="{{ message.fromName ?? '' }}">
                    {{ message is defined and message ? errorList(message.getErrors('fromName')) }}
                </div>
            </div>

            <div class="contact-form--row">
                <div class="contact-form--label">
                    <label for="phoneNumber" class="">Phone Number:</label>
                </div>
                <div class="contact-form--input">
                    <input id="phoneNumber" type="text" class="" name="message[phoneNumber]" value="{{ message.message.phoneNumber ?? '' }}">
                    {{ message is defined and message ? errorList(message.getErrors('message.phoneNumber')) }}
                </div>
            </div>

            <div class="contact-form--row">
                <div class="contact-form--label">
                    <label for="from-email" class="">Your Email:</label>
                </div>
                <div class="contact-form--input">
                    <input id="from-email" type="email" class="" name="fromEmail" value="{{ message.fromEmail ?? '' }}">
                    {{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}
                </div>
            </div>


            <div class="contact-form--row">
                <div class="contact-form--label">
                    <label for="message" class="">Your Enquiry:</label>
                </div>
                <div class="contact-form--input">
                    <textarea rows="10" cols="40" id="message" class="" name="message[body]">{{ message.message.body ?? '' }}</textarea>
                    {{ message is defined and message ? errorList(message.getErrors('message.body')) }}
                </div>
            </div>

            <div class="">
                <div class="contact-form--label">
                    <br>
                </div>
                <div class="contact-form--input">
                    <button type="submit" class="contact-form--submit">Submit</button>
                </div>
            </div>
        </div>
    </form>

验证规则

目前此插件仅支持 GUMP 进行验证，请参阅相关的 Github 文档了解可能的功能。

待办事项

• 允许使用 Illuminate Validator
• 测试
• 检查附件