JS-关于比例值（小数）的配置

我们可能会有这样的需求，在新建配置时，弹出的 Modal 中，需要用户填写数据，其中有比例字段，我们假设需要用户输入小数来表示，这时就涉及到校验非空 、小数格式 和 后续对该字段以百分比（%）格式展示，下面进行说明。

form表单样式：

<div class="modal" id="addConfigModal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">新建配置</h4>
            </div>
            <div class="modal-body">
                <form action="##" class="form-horizontal form-row-sepe" id="propConfigForm">
                    <div class="form-group">
                        <label class="control-label col-md-4"><span style="color:red">*</span>配置项1：</label>
                        <div class="col-md-4">
                            <input id="example_item1" type="text" name="item1" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-4"><span style="color:red">*</span>比例：</label>
                        <div class="col-md-4">
                            <input id="example_item2" type="text" name="proportion" class="form-control"
                                   placeholder="例：0.0100"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-4">备注：</label>
                        <div class="col-md-4">
                            <input type="text" name="remark" class="form-control" id="remark">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn blue" onclick="addOrUpdateConfig();">保存</button>
            </div>
        </div>
    </div>
</div>

js的校验非空表单项代码：

//表单字段非空校验
    function isValidParam() {
        var isValid = true;
        $("[id ^= 'example_']").each(function () {
            if (!$(this).val() || $.trim($(this).val()) == '') {
                $(this).parent().css("border", "1px solid red");
                isValid = false;
            } else {
                $(this).parent().css("border", "");
            }
        });
        return isValid;
    }

调用：

//字段非空校验
var isValid = isValidParam();
    if (!isValid) {
        bootbox.alert({title: "提示信息", message: "红框标注的部分不能为空！"});
        return;
    }

//校验比例值是否合法
var proportion = $("#example_item2").val();
validationNumber(proportion, 4); //以4位为例

该方法校验的是id为 example_ 开头的表单项，此处可根据情况自定义，不想校验的表单项不以example_ 开头即可，比如上面的备注项。通过校验，则返回true，否则返回false。这样当需要判断的表单项有很多的时候，就很省事啦。

页面展示：

下面是校验用户输入的比例值是否合法：

/**
 * 校验小数是否合法
 * value：小数值
 * num：最长小数位数
 */
function validationNumber(value, num) {

    var reg = /^\d+(\.\d+)?$/;
    if (value != null) {
        if (!reg.test(value)) {
            bootbox.alert({title:"提示信息", message:"请按照提示的格式输入！"});
            return;
        }
        if (value.split('.')[1].length > num) {
            bootbox.alert({title:"提示信息", message:"最多只能保留" + num + "位小数！"});
            return;
        }
    }
}

最后是页面的表格中对比例字段的展示，比如我们配置了proportion = 0.0900，那么表示称百分数就是：9%。但是如果通过js进行计算，将 proportion * 100 + ‘%’，计算出来的并不是9%，而是8.9999999…%，网上的很多解决方案太过复杂，所以还是从后端解决：

//原比例字段
private BigDecimal proportion;

//创建新的百分比字段
private String proportionPct;

getter and setter...

处理查询出的比例数据：

for (ProportionConfig config : list) {
            config.setProportionPct(config.getProportion().multiply(new BigDecimal("100")).stripTrailingZeros().toPlainString() + "%");
}

引用字段值的时候，用 proportionPct 就可以了。