如何将表单百分比数据以Decimal(4,2)精度存入MySQL（Laravel环境）

一、HTML输入字段配置 #

先把输入框设为数字类型，限制步进精度，同时默认显示0.00（适配无数据场景）：

<input type="number" 
       id="percentage-input" 
       name="percentage" 
       step="0.01" 
       min="0" 
       max="100" 
       value="{{ old('percentage', $model?->percentage ?? '0.00') }}">

• step="0.01"：强制输入时按两位小数步进，减少不合规输入
• value：用Laravel模板语法实现“从数据库取值/无数据显示0.00/回显旧值”的需求

二、原生JS处理输入格式化 #

在表单提交或输入框失焦时自动格式化值，满足你的5种场景要求：

const percentageInput = document.getElementById('percentage-input');
const form = document.querySelector('form');

// 失焦时即时格式化，提升用户体验
percentageInput.addEventListener('blur', formatPercentage);

// 提交表单时再次格式化，确保数据正确
form.addEventListener('submit', function(e) {
    formatPercentage.call(percentageInput);
});

function formatPercentage() {
    let value = this.value.trim();
    
    // 空值处理为0.00
    if (!value) {
        this.value = '0.00';
        return;
    }
    
    // 转换为数字，保留两位小数（四舍五入）
    let num = parseFloat(value);
    // 若需要截断而非四舍五入，替换为：num = Math.floor(num * 100) / 100;
    this.value = num.toFixed(2);
}

• 失焦事件：用户输入离开框体时自动格式化，比如输入1后会变成1.00
• 提交事件：二次校验格式化，防止用户绕过前端直接提交
• 两种小数处理逻辑：注释里的截断逻辑适配你“1.12345存1.12”的需求，默认的四舍五入也可根据实际业务切换

三、Laravel后端兜底（必加） #

前端JS可能被禁用，必须在后端再做一次处理，确保存入数据库的是decimal(4,2)格式：

1. 模型修改器+访问器（推荐） #

在对应模型里添加属性处理逻辑，自动完成存入/取出的格式化：

class YourModel extends Model
{
    // 存入数据库时自动格式化
    public function setPercentageAttribute($value)
    {
        $value = empty($value) ? 0.00 : (float)$value;
        // 截断两位小数，用round()则是四舍五入
        $this->attributes['percentage'] = number_format($value, 2, '.', '');
    }

    // 从数据库取出时自动显示两位小数
    public function getPercentageAttribute($value)
    {
        return number_format((float)$value, 2, '.', '');
    }
}

2. 控制器直接处理 #

如果不想用模型修改器，也可以在控制器里手动处理：

public function store(Request $request)
{
    $percentage = $request->input('percentage', 0.00);
    // 格式化为两位小数
    $formattedPercent = number_format((float)$percentage, 2, '.', '');
    
    // 存入数据库
    YourModel::create([
        'percentage' => $formattedPercent,
        // 其他字段...
    ]);
    
    // 后续逻辑...
}

四、验证规则补充 #

在Laravel的请求验证里添加规则，过滤非法输入：

public function rules()
{
    return [
        'percentage' => 'nullable|numeric|min:0|max:100',
    ];
}

• nullable：允许空值（会被后续处理为0.00）
• numeric：确保输入是合法数字
• min/max：根据百分比的实际范围调整（比如0-100）

内容的提问来源于stack exchange，提问作者Bastian