如何在输入中以小数大小写显示价格，但在 store() 上没有整数 valdidation 错误

Question

>我在下面有jQuery并且它可以工作，当在价格输入中插入值时，例如"3"它添加"3,00"，但随后控制器中存在验证错误，说价格是一个整数。您知道如何纠正问题吗？也就是说，将价格作为整数，但没有验证错误。

后控制器：

$prod = Product::create([
     'price' => $request->price,
]);

输入：

<div class="form-group col-md-6">
    <label for="price">Price></label>
    <input type="number" min="1" step="any" required class="form-control" value="{{ old('price', '0.00€') }}"  name="price" id="price"/>
</div>

j查询：

 document.getElementById("price").onblur =function (){
    this.value = parseFloat(this.value.replace(/,|€/g, ""))
        .toFixed(2)
        .toString()
        .replace(/B(?=(d{3})+(?!d))/g, ".");
}

Answer 1

如果您想向用户

发送原始输入数据到后端，同时在前端(在同一输入框中(显示其格式化的数据，则可以使用隐藏的表单字段，该字段在用户输入值后设置。

<div class="form-group col-md-6">
    <label for="price">Price></label>
    <input type="hidden" name="price" />
    <input type="number" min="1" step="any" required class="form-control" value="{{ old('price', '0.00€') }}"  name="show-price" id="price"/>
</div>

然后，当用户离开输入字段时，您可以设置输入的格式，同时将隐藏的输入设置为其原始值预格式化：

 document.getElementById("show-price").onblur =function (){
    var $price = document.getElementById("price");
    $price.value = this.value;
    this.value = parseFloat(this.value.replace(/,|€/g, ""))
        .toFixed(2)
        .toString()
        .replace(/B(?=(d{3})+(?!d))/g, ".");
}

我不完全确定 #show 价格的输入是什么，因此您可能需要稍微格式化它以将其修剪为裸整数，但这个想法是，在执行视觉格式之前，您将隐藏的表单字段值设置为该原始数据。