fourcal/src/main/resources/templates/admin/profit_marfin_config_input.ftl

<#assign base=request.contextPath />
<#import "../common/defaultLayout.ftl" as defaultLayout>
<@defaultLayout.layout>
    <link rel="stylesheet" href="../assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="../assets/css/amazeui.switch.css"/>

    <div class="admin-content">
        <div class="admin-content-body">
            <div class="am-cf am-padding">
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">配置管理</strong> /项目利润率配置</div>
            </div>
            <form method="post" class="am-form" id="tmpForm" action="${base}/profitMarginConfig/save">
                <!--选项卡（tabs）begin-->
                <div class="am-tabs am-margin" data-am-tabs>
                    <ul class="am-tabs-nav am-nav am-nav-tabs">
                        <li class="am-active">

                        </li>
                    </ul>
                    <div class="am-tabs-bd">
                        <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                            <input name="tId" id="tId" type="hidden" value="${tId!}"/>
                            <!--验证表单元素（validate) begin-->
                            <!--input begin-->
                            <div class="am-g am-form-group am-margin-top" id="threshold">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    <span style="color: red;">*</span>
                                    项目贡献利润率阀值：
                                </div>
                                <div class="am-u-sm-6 am-u-md-6">
                                    <input name="thresholdValue" class="js-ajax-validate"
                                           data-validate-async data-validation-message="请输入项目贡献利润率阀值"
                                           type="number" step="0.01" id="thresholdValue"
                                           value="${profitMarginConfig.thresholdValue!}" minlength="1"
                                           maxlength="4" oninput="if(value.length>4)value=value.slice(0,4)"
                                           placeholder="请输入项目贡献利润率阀值" required/>
                                    <p>注：请注意保留小数点后两位</p>
                                </div>
                                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                            </div>

                            <div class="am-g am-form-group am-margin-top" id="threshold">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    <span style="color: red;">*</span>
                                    项目年利润率：
                                </div>
                                <div class="am-u-sm-6 am-u-md-6">
                                    <input name="yearProfitMargin" class="js-ajax-validate"
                                           data-validate-async data-validation-message="请输入项目年利润率"
                                           type="number" step="0.01" id="yearProfitMargin"
                                           value="${profitMarginConfig.yearProfitMargin!}" minlength="1"
                                           maxlength="4" oninput="if(value.length>4)value=value.slice(0,4)"
                                           placeholder="请输入项目年利润率" required/>
                                    <p>注：请注意保留小数点后两位</p>
                                </div>
                                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--选项卡（tabs）end-->
                <div class="am-margin">
                    <button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
                    <#--<button type="button" class="am-btn am-btn-warning am-btn-xs"
                            onclick="javascript:history.go(-1);">返回上一级
                    </button>-->
                </div>
            </form>
        </div>
    </div>

</@defaultLayout.layout>
<script src="../assets/js/amazeui.switch.js"></script>
<script type="text/javascript">
    var urlBase = "${base}";
    var url;

    $(function () {
        /*表单验证：begin*/
        //自定义规则，用法：验证元素上加class="js-pattern-sort"
        if ($.AMUI && $.AMUI.validator) {
            $.AMUI.validator.patterns.sort = /^([0-9]+)$/;
        }
        $("#tmpForm").validator({
            // 域通过验证时回调
            onValid: function (validity) {
                $(validity.field).closest('.am-form-group').find('.am-alert').hide();
            },
            // 域验证通过时添加的操作，通过该接口可定义各种验证提示
            markValid: function (validity) {
                // this is Validator instance
                var $field = $(validity.field);
                //add by zxl，只对有required属性的字段进行验证
                if (typeof ($field.attr("required")) != "undefined") {
                    var options = this.options;
                    var $parent = $field.closest('.am-form-group');
                    $field.addClass(options.validClass).removeClass(options.inValidClass);

                    $parent.addClass('am-form-success').removeClass('am-form-error');

                    options.onValid.call(this, validity);
                }
            },
            // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
            onInValid: function (validity) {
                var $field = $(validity.field);
                var $group = $field.closest('.am-form-group');
                var $alert = $group.find('.am-alert');
                // 使用自定义的提示信息 或 插件内置的提示信息
                var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

                if (!$alert.length) {
                    $alert = $("<div class='am-alert am-alert-danger'></div>").hide().appendTo($group.find(".input-msg"));
                }
                console.log("onInValid : " + $field.val());
                $alert.html(msg).show();
            }
        });
        /*表单验证：end*/
    });


</script>
<style type="text/css">
    /*验证：提示信息样式 begin*/
    .am-alert-danger {
        background-color: transparent;
        border-color: transparent;
        color: red;
    }

    .am-alert {
        margin-bottom: 1em;
        padding: .625em;
        background: transparent;
        border: none;
        border-radius: 0;
    }

    /*验证：提示信息样式 end*/
</style>