插件窝 干货文章 Laravel-admin比例输入框:如何限制数值范围?

Laravel-admin比例输入框:如何限制数值范围?

admin 表单 RatioField 自定 208    来源:    2025-03-15

在 Laravel-admin 中,如果你想在表单中使用比例输入框并限制数值范围,可以通过自定义表单字段来实现。以下是一个示例,展示如何在 Laravel-admin 中创建一个比例输入框,并限制其数值范围。

1. 创建自定义表单字段

首先,你需要在 app/Admin/Extensions 目录下创建一个自定义表单字段类。例如,创建一个 RatioField 类:

namespace App\Admin\Extensions;

use Encore\Admin\Form\Field;

class RatioField extends Field
{
    protected $view = 'admin.form.ratio';

    protected $min = 0;
    protected $max = 100;

    public function min($min)
    {
        $this->min = $min;
        return $this;
    }

    public function max($max)
    {
        $this->max = $max;
        return $this;
    }

    public function render()
    {
        $this->script = <<<EOT
$('input[name="{$this->column}"]').attr('min', {$this->min}).attr('max', {$this->max});
EOT;

        return parent::render();
    }
}

2. 创建视图文件

接下来,在 resources/views/admin/form 目录下创建一个视图文件 ratio.blade.php

<div class="form-group {!! !$errors->has($errorKey) ? '' : 'has-error' !!}">

    <label for="{{$id}}" class="col-sm-2 control-label">{{$label}}</label>

    <div class="col-sm-8">

        @include('admin::form.error')

        <input type="number" name="{{$name}}" class="form-control" id="{{$id}}" value="{{ old($column, $value) }}" {!! $attributes !!} />

        @include('admin::form.help-block')

    </div>
</div>

3. 在表单中使用自定义字段

在你的表单中使用这个自定义字段,并设置数值范围:

use App\Admin\Extensions\RatioField;

$form->add(new RatioField('ratio', '比例'))->min(0)->max(100);

4. 解释

  • RatioField 类继承自 Encore\Admin\Form\Field,并重写了 render 方法,在渲染时通过 JavaScript 设置 minmax 属性。
  • ratio.blade.php 是自定义字段的视图文件,定义了一个简单的输入框。
  • 在表单中使用 RatioField 时,可以通过 minmax 方法设置数值范围。

5. 结果

通过上述步骤,你可以在 Laravel-admin 中创建一个比例输入框,并限制其数值范围。用户在输入时,如果输入的值超出了设定的范围,浏览器会自动提示错误。

6. 其他注意事项

  • 如果你需要更复杂的验证逻辑,可以在 RatioField 类中添加更多的 JavaScript 逻辑,或者在 Laravel 的验证规则中进行处理。
  • 如果你需要支持小数比例,可以将 type="number" 改为 type="text",并在 JavaScript 中处理输入格式。

通过这种方式,你可以灵活地在 Laravel-admin 中创建自定义表单字段,并实现各种复杂的输入限制。