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

在 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 设置 min 和 max 属性。
• ratio.blade.php 是自定义字段的视图文件，定义了一个简单的输入框。
• 在表单中使用 RatioField 时，可以通过 min 和 max 方法设置数值范围。

5. 结果

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

6. 其他注意事项

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

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