isev-ltd / contact-form-validation
针对 Craft CMS 联系表单插件的增强验证
0.0.1
2017-08-09 18:30 UTC
Requires
- craftcms/cms: ^3.0.0-beta.20
- craftcms/contact-form: ~2.0
- wixel/gump: ~v1.5.4
This package is not auto-updated.
Last update: 2024-09-29 02:58:49 UTC
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
- 测试
- 检查附件