html - HTML 输入表单中的小数分隔符

Question

我的项目遇到问题。

我想在值的最后 2 位数字后面有一个小数点分隔符。例如。数据库中的 4500 应输出为 45.00

现在我想做的是将其可视化为用户填写的表单。然而，目前它不仅将其可视化，而且还尝试通过添加分隔符将其输入到数据库中，并返回错误。 mysql中的表是整数。

代码:

表格:

 <div class="form-group">
 {!! Form::label('price', 'Price:') !!}
 {!! Form::text('price', null, array('class'=>'form-price', 'lang'=>'en-150', 'placeholder'=>'0.00', 'data-type'=>'currency')) !!}
 </div>

JS:

 <script type="text/javascript">
$("input[data-type='currency']").on({
keyup: function() {
formatCurrency($(this));
},
blur: function() { 
formatCurrency($(this), "blur");
}
});


function formatNumber(n) {
// format number 1000000 to 1,234,567
return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, "")
}


function formatCurrency(input, blur) {
// appends $ to value, validates decimal side
// and puts cursor back in right position.

// get input value
var input_val = input.val();

// don't validate empty input
if (input_val === "") { return; }

// original length
var original_len = input_val.length;

// initial caret position 
var caret_pos = input.prop("selectionStart");

// check for decimal
if (input_val.indexOf(".") >= 0) {

// get position of first decimal
// this prevents multiple decimals from
// being entered
var decimal_pos = input_val.indexOf(".");

// split number by decimal point
var left_side = input_val.substring(0, decimal_pos);
var right_side = input_val.substring(decimal_pos);

// add commas to left side of number
left_side = formatNumber(left_side);

// validate right side
right_side = formatNumber(right_side);

// On blur make sure 2 numbers after decimal
if (blur === "blur") {
  right_side += "00";
}

// Limit decimal to only 2 digits
right_side = right_side.substring(0, 2);

// join number by .
input_val = left_side + "." + right_side;

} else {
// no decimal entered
// add commas to number
// remove all non-digits
input_val = formatNumber(input_val);
input_val = input_val;

// final formatting
if (blur === "blur") {
  input_val += ".00";
}
}

// send updated string to input
input.val(input_val);

// put caret back in the right position
var updated_len = input_val.length;
caret_pos = updated_len - original_len + caret_pos;
input[0].setSelectionRange(caret_pos, caret_pos);
}
</script>

那么当我在表单输入中输入 45.00 并单击提交以在数据库中插入 4500 时，我该如何做到这一点。因为在这种形式中，代码尝试插入十进制值 (45.00)，并且由于它是 mysql 中的整数，因此会返回错误。

Answer 1

查看Defining A Mutator文档中的部分。

Accessors and mutators allow you to format Eloquent attribute values when you retrieve or set them on model instances.

在你的情况下，这可能是这样的:

// In your model.

public function setPriceAttribute($value)
{
    $this->attributes['price'] = $value * 100; //$value in dollar
}

为了获取正确格式的值，您可以设置一个访问器。

// In your model.

public function getPriceAttribute()
{
    return number_format($this->price / 100, 2);
}