在Laravel中如何校验三个number类型输入框的数值之和等于100？

分为前端实时交互校验和后端兜底校验两部分，建议两者都做，兼顾用户体验和数据安全性。

1. 前端校验（输入时实时提示） #

修改blade.php代码，添加事件监听实时计算三个输入框的和，不符合要求时阻止表单提交并提示用户：

<!-- 给input添加公共class方便绑定事件，同时可限制最小值为0避免负数 -->
<input type="number" name="number1" class="percent-input" min="0" />
<input type="number" name="number2" class="percent-input" min="0" />
<input type="number" name="number3" class="percent-input" min="0" />
<!-- 用来显示错误提示的容器 -->
<span id="sum-error" style="color:red;display:none;">三个数值之和必须等于100</span>

<!-- 注意给你的表单添加id为my-form，和下方代码对应 -->
<script>
const inputs = document.querySelectorAll('.percent-input');
const form = document.getElementById('my-form');
const errorTip = document.getElementById('sum-error');

// 输入时实时校验
inputs.forEach(input => {
  input.addEventListener('input', checkSum);
});

// 表单提交时校验
form.addEventListener('submit', (e) => {
  if(!checkSum()) {
    e.preventDefault();
  }
});

// 校验和是否为100的方法
function checkSum() {
  let sum = 0;
  inputs.forEach(input => {
    sum += Number(input.value) || 0;
  });
  const isValid = sum === 100;
  errorTip.style.display = isValid ? 'none' : 'block';
  return isValid;
}
</script>

2. 后端校验（兜底防止非法请求） #

修改控制器代码，在原有必填校验的基础上增加和为100的判断，校验不通过时返回错误信息：

public function store(Request $request) {
    $data = $request->validate([
       // 如果允许输入小数，把integer改成numeric即可
       'number1' => 'required|integer|min:0',
       'number2' => 'required|integer|min:0',
       'number3' => 'required|integer|min:0',
    ]);
    
    $sum = $data['number1'] + $data['number2'] + $data['number3'];
    if ($sum !== 100) {
        // 校验不通过返回表单页并携带错误信息、用户已输入的内容
        return back()->withErrors(['sum' => '三个数值之和必须恰好等于100'])->withInput();
    }

    $myDb = new Mynumber();
    $myDb->number1 = $data['number1'];
    $myDb->number2 = $data['number2'];
    $myDb->number3 = $data['number3'];
    $myDb->save();
    
    // 保存成功后的跳转逻辑可自行补充
    return back()->with('success', '保存成功');
}

如果需要复用该校验规则，也可以自定义Laravel验证规则来封装和为100的判断逻辑。

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