webup/laravel-form

Laravel 表单构建工具包。

v1.8.0 2024-03-21 12:59 UTC

README

安装

步骤 1: 使用 Composer 安装

$ composer require webup/laravel-form

步骤 2: 添加服务提供者

将以下行添加到 config/app.php 中

'providers' => [
    //...
    Webup\LaravelForm\FormServiceProvider::class
]

步骤 3: 使用门面(可选)

为了使代码更简洁,您可以在 config/app.php 中添加以下行来使用门面

'aliases' => [
    //...
    'Form'      => Webup\LaravelForm\Facades\Form::class,
]

现在您可以直接在视图中使用 Laravel Form(下面有一些示例)

步骤 4: 发布配置

您可以将配置发布并覆盖 config/form.php 中的配置

 php artisan vendor:publish

使用

方法

这些方法可以用于任何类型的元素

  • label($label = null, $escape = true)
  • value($value = null)
  • placeholder($placeholder = null)
  • name($name = null)
  • required($showStar = true)
  • errors($errors = [])
  • attr(array $attr = [])
  • wrapperAttr(array $attr = [])
  • wrapperClass($wrapperClass) 已弃用 使用 wrapperAttr(['class' => 'myclass'])

生成的 HTML

{!! Form::create('text', 'name')
    ->label('Name')
    ->value('Barney')
    ->required()
    ->attr(['maxlenght' => '50'])
    ->wrapperAttr(['class' => 'f-custom-class']) !!}

无错误

<div class="f-group f-custom-class">
    <label for="name">Name <i class="f-required">*</i></label>    
    <input type="text" id="name" name="name" value="Barney" maxlength="50">
</div>

有错误(从 Laravel 验证中检索)

<div class="f-group f-custom-class f-error">
    <label for="name">Name <i class="f-required">*</i></label>    
    <input type="text" id="name" name="name" value="Barney" maxlength="50">
    <ul class="f-error-message">
        <li>Name is required</li>
    </ul>
</div>

您可以在 config/form.php 中覆盖默认 CSS 类。

重要:Laravel Form 可以处理 HTML 生成和客户端验证,但您需要自行管理服务器端验证。

元素

输入

{!! Form::create('email', 'name')
    ->label('Email')
    ->value('homer.simpson@example.com')
    ->placeholder('example@adresse.com')
    ->required()
    ->wrapperAttr(['class' => 'custom-class']) !!}

文本域

{!! Form::create('textarea', 'name')
    ->label('Name')
    ->value('Nullam id dolor id nibh ultricies vehicula ut id elit.') !!}

单选按钮

{!! Form::create('radio', 'gender')->label('Gender')
    ->addRadio(1, 'Male', 'male')
    ->addRadio(0, 'Female', 'female')
    ->wrapperAttr(['class' => 'custom-class'])
    ->value(0) !!}

特定方法

  • addRadio($value, $label, $id, $attr = [])

选择框

{!! Form::create('select', 'fruits')
    ->label("Fruits")
    ->placeholder("What's your favorite?")
    ->addOptions(['apple' => 'Apple', 'strawberry' => 'Strawberry', 'melon' => 'Melon'])
    ->value('apple') !!}

特定方法

  • addOptions(array $options)

复选框

{!! Form::create('checkbox', 'cgu')
    ->label("I accept the general terms and conditions")
    ->value(true) !!}

您可以使用 ->attr(['value' => '1']) 来更改复选框的值

反垃圾邮件功能

蜜罐

{!! Form::honeypot("unicorn_mail") !!}

将在隐藏的 div 中创建一个 text 输入 name='unicorn_mail'(通过 JavaScript)

验证

$request->validate([
    [...]
    'unicorn_mail' => 'honeypot',
]);

时间陷阱

{!! Form::timetrap("unicorn_time") !!}

将在隐藏的 div 中创建一个具有 name='unicorn_time'value="{encryptedTimestamp}"text 输入(通过 JavaScript)

验证

$request->validate([
    [...]
    'unicorn_time' => 'timetrap:2',
]);

在此示例中,时间陷阱时间设置为 2 秒。如果没有设置值,则采用配置 form.antiSpam.minFormSubmitTime。最后,如果未设置配置 form.antiSpam.minFormSubmitTime,则默认值为 3 秒。

样式

下面是可用于 Laravel Form 的默认样式。

.f-group {
  margin-bottom: 1rem;
}

.f-group label {
  margin-bottom: .5rem;    
}

.f-required {
  color: #c0392b;
  font-weight: bold;
}

.f-error input {
  border: 1px solid #c0392b;
}

.f-error-message {
  margin-top: 4px;
  color: #c0392b;
}

贡献

请参阅 CONTRIBUTINGCONDUCT 了解详细信息。

致谢

Agence Webup 开发

许可证

MIT 许可证(MIT)。有关更多信息,请参阅 许可证文件