README

这是一个用于在 Laravel 9 中创建 Bootstrap 5 风格表单元素的包。

功能

标签
错误消息
Bootstrap 5 标记和类（包括状态、颜色和大小）
错误验证消息
表单填充（使用模型实例、数组或表单提交后发生验证错误时）
国际化
使用 PHP 连接方法添加参数
无依赖（无 Laravel Collective 依赖）

简介

之前

<div>
    <label for="username">Username</label>
    <input
        type="text"
        class="form-control @if($errors->has('username')) is-invalid @endif "
        id="username"
        value="{{old('username', $username)}}"
    />
    @if($errors->has('username'))
    <div class="invalid-feedback">{{$errors->first('username')}}</div>
    @endif
</div>

之后

BSForm::text('username', 'Username')

安装

使用 Composer 安装该包。

composer require cirrion/laravel-bootstrap-forms

Laravel 自动发现

自动发现功能将为您完成所有工作，您的工作就完成了，您现在可以开始使用了。

用法

基本表单控件

打开和关闭表单

// Opening a form using POST method

{!!BSForm::open()!!}
// ... Form components here
{!!BSForm::close()!!}

打开表单将自动为您添加 _token 字段

内联表单

// Making all inputs inline
{!!BSForm::open()->formInline()!!}

// You can use FALSE to turn off disable form inline
{!!BSForm::open()->formInline(false)!!}

字段集

// Example
{!!BSForm::fieldsetOpen('Legend title')!!}
// ... fieldset content
{!!BSForm::fieldsetClose()!!}

基本输入

文本输入

// Example
{!!BSForm::text('name', 'User name')!!}

文本区域

// Example
{!!BSForm::textarea('description', 'Description')!!}

选择

// Example
{!!BSForm::select('city', 'Choose your city', [1 => 'Gotham City', 2 => 'Springfield'])!!}

选项

// Example

// With array
{!!BSForm::select('city', 'Choose your city')->options([1 => 'Gotham City', 2 => 'Springfield'])!!}

// With collection
$cities = collect([1 => 'Gotham City', 2 => 'Springfield'])
{!!BSForm::select('city', 'Choose your city')->options($cities)!!}

// With model collection
$cities = \App\City::all();
{!!BSForm::select('city', 'Choose your city')->options($cities)!!}

// Your model should have id and name attributes. If these keys are different, you can pass second and/or third parameters (you can use the second parameter to access some model acessor, also)
$cities = \App\City::all();
{!!BSForm::select('city', 'Choose your city')->options($cities, 'city_name', 'id_object_field')!!}

// When you are using collections, you can use prepend method (https://laravel.net.cn/docs/5.8/collections#method-prepend) to add an first empty value, like "Choose your city"
$cities = \App\City::all();
{!!BSForm::select('city', 'Choose your city')->options($cities->prepend('Choose your city', ''))!!}

复选框

// Example
{!!BSForm::checkbox('orange', 'Orange')!!}

单选按钮

// Example
{!!BSForm::radio('orange', 'Orange')!!}

文件

// Example
{!!BSForm::file('doc', 'Document')!!}

日期输入

// Example
{!!BSForm::date('birthday', 'Birthday')!!}

电话输入

// Example
{!!BSForm::tel('number', 'Phone number')!!}

时间输入

// Example
{!!BSForm::time('hour', 'Meeting hour')!!}

URL 输入

// Example
{!!BSForm::urlInput('website', 'You website')!!}

范围输入

// Example
{!!BSForm::range('name', 'User name')!!}

隐藏

// Example
{!!BSForm::hidden('user_id')!!}

锚点

// Example
{!!BSForm::anchor("Link via parameter", 'foo/bar')!!}

按钮

提交

// Example
{!!BSForm::submit("Send form")!!}

按钮

// Example
{!!BSForm::button("Do something", "warning", "lg")!!}

重置

// Example
{!!BSForm::reset("Clear form")!!}

链式方法

此包使用链式调用功能，允许轻松传递更多参数。

填写表单

// Examples

// With initial data using a Model instance
$user = User::find(1);
{!!BSForm::open()->fill($user)!!}

// With initial array data
$user = ['name' => 'Jesus', 'age' => 33];
{!!BSForm::open()->fill($user)!!}

URL

在锚点和表单打开中使用

// Example
{!!BSForm::anchor("Link via url")->url('foo/bar')!!}

路由

在锚点和表单打开中使用

// Example
{!!BSForm::anchor("Link via route")->route('home')!!}

错误包

如果您在一页上有多个表单，请使用它。您为每个表单设置一个标识符，错误将附加到该特定表单

// Example: attach this form to a error bag called "registerErrorBag"
{!!BSForm::open()->route('register.post')->errorBag("registerErrorBag")!!}

// ------------------------------------------------------

// Now, in your controller (register.post route), you can redirect the user to a form page again, with erros inside a error bag called "registerErrorBag"
public function register(Request $request)
{
    $validator = Validator::make($request->all(), [
        // ... rules here
    ]);

    if ($validator->fails()) {
        return redirect()
            ->route('register.form')
            ->withInput()
            ->withErrors($validator, 'registerErrorBag');
    }

    // Proced to register here
}

// ------------------------------------------------------

// If your validation is on a Form Request, you can add a protected method "$errorBag" to set a ErrorBag name

class RegisterRequest extends FormRequest
{

    protected $errorBag = 'registerErrorBag';

    public function authorize()
    {
        return true;
    }

    public function rules()
    {
        return [
            // ... rules here
        ];
    }
}

错误

在面板中显示所有错误

// Example
{!!BSForm::errors("The form has errors")!!}

禁用验证消息

禁用成功/错误状态和验证错误消息

// Example
{!!BSForm::text('username', 'User name')->disableValidation()!!}

// You can use FALSE to turn off disable validation (to enable it)
{!!BSForm::text('username', 'User name')->disableValidation(false)!!}

已勾选

设置复选框/单选按钮的选中状态

// Examples

// Using readonly field
{!!BSForm::checkbox('agree', 'I agree')->checked()!!}

// You can use FALSE to turn off checked status
{!!BSForm::checkbox('agree', 'I agree')->checked(false)!!}

内联

设置复选框/单选按钮的选中状态

// Examples
{!!BSForm::radio('orange', 'Orange')->inline()!!}

{!!BSForm::checkbox('orange', 'Orange')->inline()!!}

// You can use FALSE to turn off inline status
{!!BSForm::checkbox('orange', 'Orange')->inline(false)!!}

占位符

// Example
{!!BSForm::text('name', 'Name')->placeholder('Input placeholder')!!}

多选

// Example
{!!BSForm::select('city', 'Choose your city', [1 => 'Gotham City', 2 => 'Springfield'])->multiple()!!}

区域

使用区域，包将查找 resources/lang/{CURRENT_LANG}/forms/user.php 语言文件，并使用标签和帮助文本作为替换文本的键

// Example
{!!BSForm::open()->locale('forms.user')!!}

帮助文本

// Example
{!!BSForm::text('name', 'Name')->help('Help text here')!!}

自定义属性

// Example
{!!BSForm::text('name', 'Name')->attrs(['data-foo' => 'bar', 'rel'=> 'baz'])!!}

包装 div 中的自定义属性（<div class="form-group">...</div>）

// Example
{!!BSForm::text('name', 'Name')->wrapperAttrs(['data-foo' => 'bar', 'id'=> 'name-wrapper'])!!}

只读

// Examples

// Using readonly field
{!!BSForm::text('name', 'Name')->readonly()!!}

// You can use FALSE to turn off readonly status
{!!BSForm::text('name', 'Name')->readonly(false)!!}

禁用

// Examples

// Disabling a field
{!!BSForm::text('name', 'Name')->disabled()!!}

// Disabling a fieldset
{!!BSForm::fieldsetOpen('User data')->disabled()!!}

// You can use FALSE to turn off disabled status
{!!BSForm::text('name', 'Name')->disabled(false)!!}

块

// Examples

// Disabling a field
{!!BSForm::text('name', 'Name')->block()!!}

// You can use FALSE to turn off block status
{!!BSForm::text('name', 'Name')->block(false)!!}

必填

// Examples

// Disabling a field
{!!BSForm::text('name', 'Name')->required()!!}

// Disabling a fieldset
{!!BSForm::fieldsetOpen('User data')->required()!!}

// You can use FALSE to turn off required status
{!!BSForm::text('name', 'Name')->required(false)!!}

自动填充

查看：https://html.whatwg.cn/multipage/forms.html#autofill

如果表单上未指定自动完成值，HTML 规范要求默认值为 'on'。因此，您必须明确将其关闭。

将自动生成具有单词名称的字段的自动完成值，这些名称与有效值匹配（例如 name、email、tel、organization）。完整的列表在上述规范中。

// Examples

// Switch off autocomplete for the form
{!!BSForm::open()->autocomplete('off')!!}

// Explicitly set a autocomplete value
{!!BSForm::text('mobile', 'Mobile Number')->autocomplete('tel')!!}

// Disable autocomplete for fields with valid names
{!!BSForm::text('name', 'Name')->autocomplete('off')!!}

Id

// Example
{!!BSForm::text('name', 'Name')->id('user-name')!!}

Id 前缀

// Example
{!!BSForm::open()->idPrefix('register')!!}

多部分

// Examples
{!!BSForm::open()->multipart()!!}

// You can use FALSE to turn off multipart
{!!BSForm::open()->multipart(false)!!}

方法

// Examples
{!!BSForm::open()->method('get')!!}
{!!BSForm::open()->method('post')!!}
{!!BSForm::open()->method('put')!!}
{!!BSForm::open()->method('patch')!!}
{!!BSForm::open()->method('delete')!!}

显式 HTTP 动词

// Examples
{!!BSForm::open()->get()!!}
{!!BSForm::open()->post()!!}
{!!BSForm::open()->put()!!}
{!!BSForm::open()->patch()!!}
{!!BSForm::open()->delete()!!}

颜色

// Examples
{!!BSForm::button("Do something")->color("warning")!!}

{!!BSForm::button("Do something")->color("primary")!!}

显式颜色

// Examples
{!!BSForm::button("Button label")->warning()!!}
{!!BSForm::button("Button label")->outline()!!}
{!!BSForm::button("Button label")->success()!!
{!!BSForm::button("Button label")->danger()!!}
{!!BSForm::button("Button label")->secondary()!!}
{!!BSForm::button("Button label")->info()!!}
{!!BSForm::button("Button label")->light()!!}
{!!BSForm::button("Button label")->dark()!!}
{!!BSForm::button("Button label")->link()!!}

大小

// Examples
{!!BSForm::button("Do something")->size("sm")!!}

{!!BSForm::button("Do something")->size("lg")!!}

显式大小

// Examples
{!!BSForm::button("Button label")->sm()!!}
{!!BSForm::button("Button label")->lg()!!}

类型

// Examples

// Password field
{!!BSForm::text('password', 'Your password')->type('password')!!}

// Number field
{!!BSForm::text('age', 'Your age')->type('number')!!}

// Email field
{!!BSForm::text('email', 'Your email')->type('email')!!}

Min

为输入设置 min 属性

// Example
{!!BSForm::text('age', 'Your age')->type('number')->min(18)!!}

Max

为输入设置 max 属性

// Example
{!!BSForm::text('age', 'Your age')->type('number')->max(18)!!}

Name

// Examples
{!!BSForm::text('text')->name('name')!!}

默认值

// Example
{!!BSForm::text('name', 'Your name')->value('Maria')!!}

渲染

// Examples

// Number field
{!!BSForm::render('text')->name('age')->label('Your age')!!}

禁用 is-valid CSS 类

// Examples

// Disable Bootstrap's is-valid CSS class
{!!BSForm::text('name', 'Name')->disableIsValid()!!}

链式属性

您可以使用链式功能为每个组件设置大量设置

// Examples

{!!BSForm::open()->locale('forms.user')->put()->multipart()->route('user.add')->data($user)!!}

{!!BSForm::text('name', 'Name')->placeholder('Type your name')->lg()!!}

{!!BSForm::anchor("Link as a button")->sm()->info()->outline()!!}

{!!BSForm::submit('Awesome button')->id('my-btn')->disabled()->danger()->lg()!!}

{!!BSForm::close()!!}

cirrion / laravel-bootstrap-forms

维护者

详细信息