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

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

输入 表单 验证 可以 706    来源:    2025-03-15

在 Laravel-admin 中,如果你想在表单中使用比例输入框(例如一个百分比输入框),并且希望限制输入的数值范围,你可以通过以下步骤来实现。

1. 使用 number 输入框

首先,你可以在表单中使用 number 类型的输入框,并设置 minmax 属性来限制数值范围。

$form->number('percentage', '百分比')
    ->min(0)
    ->max(100)
    ->help('请输入0到100之间的数值');

2. 自定义验证规则

如果你需要更复杂的验证逻辑,可以在模型或表单请求中添加自定义验证规则。

在模型中添加验证规则

你可以在模型的 rules 方法中添加验证规则:

class YourModel extends Model
{
    public function rules()
    {
        return [
            'percentage' => 'required|numeric|min:0|max:100',
        ];
    }
}

在表单请求中添加验证规则

你也可以在表单请求类中添加验证规则:

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class YourFormRequest extends FormRequest
{
    public function rules()
    {
        return [
            'percentage' => 'required|numeric|min:0|max:100',
        ];
    }
}

3. 使用 JavaScript 进行前端验证

如果你希望在前端也进行验证,可以使用 JavaScript 来限制输入范围。

$form->number('percentage', '百分比')
    ->min(0)
    ->max(100)
    ->help('请输入0到100之间的数值')
    ->attribute('oninput', 'this.value = Math.max(0, Math.min(100, this.value))');

4. 使用 slider 组件

如果你希望使用滑块来输入比例,可以使用 slider 组件,并设置 minmax 属性。

$form->slider('percentage', '百分比')
    ->options(['min' => 0, 'max' => 100, 'step' => 1])
    ->help('请拖动滑块选择0到100之间的数值');

5. 自定义表单字段

如果你需要更复杂的逻辑,可以自定义表单字段。

$form->customField('percentage', '百分比', function ($value) {
    return "<input type='number' name='percentage' value='{$value}' min='0' max='100' step='1'>";
});

总结

通过以上方法,你可以在 Laravel-admin 中轻松实现比例输入框的数值范围限制。你可以根据具体需求选择合适的方式,或者结合多种方式来实现更复杂的逻辑。