From 992f180759086f928e9af0576d8893d0711ecc68 Mon Sep 17 00:00:00 2001 From: Argo-Surface Date: Mon, 3 Dec 2018 11:06:11 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E8=84=9A=E6=9C=AC=EF=BC=9Alo?= =?UTF-8?q?ngbow.validate=E8=84=9A=E6=9C=AC=E5=A2=9E=E5=8A=A0checkGroup?= =?UTF-8?q?=E5=88=A4=E6=96=AD=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Bootstrap.Client/wwwroot/css/theme.css | 69 +++++++++++++++++-- .../wwwroot/lib/longbow/longbow.validate.js | 50 +++++++++----- 2 files changed, 96 insertions(+), 23 deletions(-) diff --git a/Bootstrap.Client/wwwroot/css/theme.css b/Bootstrap.Client/wwwroot/css/theme.css index ed061f72..05402d83 100644 --- a/Bootstrap.Client/wwwroot/css/theme.css +++ b/Bootstrap.Client/wwwroot/css/theme.css @@ -16,7 +16,7 @@ a, a:hover, a:focus { outline: none; } -body, .form-control, .dropdown-menu, .btn:not(.btn-lg), .input-group-text, .popover-header { +body, .form-control, .dropdown-menu, .btn:not(.btn-lg):not(.btn-xs), .input-group-text, .popover-header { font-size: 0.875rem; } @@ -270,6 +270,34 @@ footer { border-bottom-color: #dc3545; } +.radioGroup, .checkGroup, [radioGroup="true"], [checkGroup="true"] { + border: solid 1px transparent; + border-radius: 4px; + padding: 1px 4px; +} + + .radioGroup.is-invalid, .checkGroup.is-invalid, [radioGroup="true"].is-invalid, [checkGroup="true"].is-invalid { + border: solid 1px #dc3545; + } + + .radioGroup.is-invalid .form-check-input ~ .form-check-label, + .checkGroup.is-invalid .form-check-input ~ .form-check-label, + [radioGroup="true"].is-invalid .form-check-input ~ .form-check-label, + [checkGroup="true"].is-invalid .form-check-input ~ .form-check-label { + color: #dc3545; + } + + .radioGroup.is-valid .form-check-input ~ .form-check-label, + [radioGroup="true"].is-valid .form-check-input ~ .form-check-label { + color: #28a745; + } + + .checkGroup.is-valid .form-check-input ~ .form-check-label, + [checkGroup="true"].is-valid .form-check-input ~ .form-check-label { + color: unset; + } + + input.is-invalid { background-repeat: no-repeat; background-image: url('../images/error.png'); @@ -310,6 +338,10 @@ input.pending { padding: 10px 15px; } +.modal-body, .modal-footer, .popover-body { + background-color: #fff; +} + .modal-title { overflow-x: hidden; text-overflow: ellipsis; @@ -348,7 +380,7 @@ input.pending { margin-left: 6px; } -.btn span:last-child { +.btn i.fa + span { margin-left: 4px; display: none; } @@ -401,7 +433,7 @@ input.pending { word-break: break-all; } - .bootstrap-table .fixed-table-container .card-view .value > a, .bootstrap-table .fixed-table-container .card-view .value > div { + .bootstrap-table .fixed-table-container .card-view .value > a, .bootstrap-table .fixed-table-container .card-view .value > div:not(.form-check) { min-width: 60px; display: inline-block; } @@ -410,7 +442,7 @@ input.pending { margin-bottom: 6px; } -.card-body .bootstrap-table { +.card-body:not(.nobar) .bootstrap-table { margin-top: -10px; } @@ -540,6 +572,35 @@ input.pending { display: inline-block; } +.toggle .btn-default, .toggle.btn-default { + text-shadow: 0 1px 0 #fff; + background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%); + background-image: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0)); + background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + border-color: #ccc; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); +} + + .toggle .btn-default.active { + background-image: none; + background-color: #e0e0e0; + border-color: #dbdbdb; + } + + .toggle .btn-default.active:hover { + color: #333; + background-color: #d4d4d4; + border-color: #8c8c8c; + } + +.toggle.btn .toggle-handle { + display: inline-block; + margin-left: 0; +} + .sweet-alert h2 { margin-top: 32px; margin-bottom: 16px; diff --git a/Bootstrap.Client/wwwroot/lib/longbow/longbow.validate.js b/Bootstrap.Client/wwwroot/lib/longbow/longbow.validate.js index efaa7c50..aa70bb63 100644 --- a/Bootstrap.Client/wwwroot/lib/longbow/longbow.validate.js +++ b/Bootstrap.Client/wwwroot/lib/longbow/longbow.validate.js @@ -181,7 +181,16 @@ result = $.validator.methods[rule].call(this.options, $this.val(), element, methods[rule]); if (!result) { $this.attr('data-original-title', this.defaultMessage(element, { method: rule, parameters: methods[rule] })); - break; + } + + // checkGroup rule + if (rule === 'checkGroup') { + var $checkers = this.$element.find(this.options.childClass).filter(function () { + var $this = $(this); + return $this.hasClass(rule) || $this.attr(rule); + }); + if (result) $checkers.removeClass(this.options.errorClass).tooltip('dispose'); + else $checkers.addClass(this.options.errorClass).tooltip(); } } else { @@ -202,26 +211,21 @@ return message; }; - Validate.prototype.attributeRules = function (element) { - var rules = {}, $element = $(element), value; + Validate.prototype.attributeRules = function (element, rules) { + var $element = $(element), value; - $.each(["radioGroup"], function () { - value = element.getAttribute(this); - if (value === "") value = true; - value = !!value; - rules[this] = value; - if (value) { - rules["required"] = false; - $(element).on('change', ':radio', function () { - $(this).trigger('input.lgb.validate'); - }); + $.each(["remote"], function () { + var para = $element.attr(this); + if (para) { + if (element.name === "") element.name = element.id; + rules[this] = $.formatUrl(para); } }); - $.each(["remote"], function () { - if (element.getAttribute(this)) { - if (element.name === "") element.name = element.id; - var para = $(element).attr(this); - rules[this] = $.formatUrl(para); + + $.each(["radioGroup", "checkGroup"], function () { + if (rules[this]) { + delete rules.required; + return false; } }); return rules; @@ -230,7 +234,11 @@ Validate.prototype.rules = function (element) { var $this = $(element); var rules = $this.data('lgb.Validate.Rules'); - if (!rules) $this.data('lgb.Validate.Rules', rules = $.validator.normalizeRules($.extend({ required: true }, $.validator.classRules(element), $.validator.attributeRules(element), this.attributeRules(element)))); + if (!rules) $this.data('lgb.Validate.Rules', rules = this.attributeRules(element, $.validator.normalizeRules($.extend( + { required: true }, + $.validator.classRules(element), + $.validator.attributeRules(element) + )))); return rules; }; @@ -265,6 +273,10 @@ $.validator.addMethod("radioGroup", function (value, element) { return $(element).find(':checked').length === 1; }, "请选择一个选项"); + + $.validator.addMethod("checkGroup", function (value, element) { + return $(element).parents('[data-toggle="LgbValidate"]').find(':checked').length >= 1; + }, "请选择一个选项"); } $('[data-toggle="LgbValidate"]').lgbValidate(); });