更新脚本：行为式滑块验证码同步更新到最新

Bootstrap.Admin/wwwroot/css/theme.css

@@ -526,3 +526,11 @@ input.pending {
     padding: 0.375rem 1.5rem;
     font-size: 1rem;
 }
+
+.refreshIcon {
+    color: rgba(255,255,255,.8);
+}
+
+  .refreshIcon:hover {
+    color: #fff;
+  }

Bootstrap.Admin/wwwroot/lib/captcha/longbow.slidercaptcha.js

@@ -19,7 +19,8 @@
         loadingText: '正在加载中...',
         failedText: '再试一次',
         barText: '向右滑动填充拼图',
-        repeatIcon: 'fa fa-repeat'
+        repeatIcon: 'fa fa-repeat',
+        maxLoadCount: 3
     };
 
     function Plugin(option) {
@@ -28,7 +29,7 @@
             var data = $this.data('lgb.SliderCaptcha');
             var options = typeof option === 'object' && option;
 
-            if (!data && /init|reset/.test(option)) return;
+            if (!data && /init|reset|verify/.test(option)) return;
             if (!data) $this.data('lgb.SliderCaptcha', data = new SliderCaptcha(this, options));
             if (typeof option === 'string') data[option]();
         });
@@ -127,10 +128,11 @@
             return Math.round(Math.random() * (end - start) + start);
         };
         var localImg = function () {
-            return $.format('../images/Pic{0}.jpg', Math.round(Math.random() * 4));
+            return '../images/Pic' + Math.round(Math.random() * 4) + '.jpg';
         };
         var img = new Image();
         img.crossOrigin = "Anonymous";
+        var loadCount = 0;
         img.onload = function () {
             // 随机创建滑块的位置
             that.x = getRandomNumberByRange(L + 10, that.options.width - (L + 10));
@@ -147,12 +149,23 @@
             that.text.text(that.text.attr('data-text'));
         };
         img.onerror = function () {
+            loadCount++;
+            if (window.location.protocol === 'file:') {
+                loadCount = that.options.maxLoadCount;
+                console.error("can't load pic resource file from File protocal. Please try http or https");
+            }
+            if (loadCount >= that.options.maxLoadCount) {
+                that.text.text('加载失败').addClass('text-danger');
+                return;
+            }
             img.src = localImg();
         }
         img.setSrc = function () {
             var src = '';
+            loadCount = 0;
+            that.text.removeClass('text-danger');
             if ($.isFunction(that.options.setSrc)) src = that.options.setSrc();
-            if(!src || src === '') src = 'https://picsum.photos/' + that.options.width + '/' + that.options.height + '/?image=' + Math.round(Math.random() * 20);
+            if (!src || src === '') src = 'https://picsum.photos/' + that.options.width + '/' + that.options.height + '/?image=' + Math.round(Math.random() * 20);
             if (isIE) { // IE浏览器无法通过img.crossOrigin跨域，使用ajax获取图片blob然后转为dataURL显示
                 var xhr = new XMLHttpRequest()
                 xhr.onloadend = function (e) {
@@ -188,13 +201,14 @@
         $(this.refreshIcon).on('click', function () {
             that.text.text(that.options.barText);
             that.reset();
-            if ($.isFunction(that.options.onRefresh)) that.options.onRefresh.call(that);
+            if ($.isFunction(that.options.onRefresh)) that.options.onRefresh.call(that.$element);
         });
 
         var originX, originY, trail = [],
             isMouseDown = false
 
         var handleDragStart = function (e) {
+            if (that.text.hasClass('text-danger')) return;
             originX = e.clientX || e.touches[0].clientX;
             originY = e.clientY || e.touches[0].clientY;
             isMouseDown = true;
@@ -229,10 +243,10 @@
             } = that.verify()
             if (spliced && verified) {
                 that.sliderContainer.addClass('sliderContainer_success');
-                if ($.isFunction(that.options.onSuccess)) that.options.onSuccess.call(that);
+                if ($.isFunction(that.options.onSuccess)) that.options.onSuccess.call(that.$element);
             } else {
                 that.sliderContainer.addClass('sliderContainer_fail');
-                if ($.isFunction(that.options.onFail)) that.options.onFail.call(that);
+                if ($.isFunction(that.options.onFail)) that.options.onFail.call(that.$element);
                 setTimeout(() => {
                     that.text.text(that.options.failedText);
                     that.reset();

Bootstrap.Admin/wwwroot/lib/captcha/slidercaptcha.css

@@ -120,12 +120,12 @@ body {
   top: 0;
   cursor: pointer;
   margin: 6px;
-  color: rgba(255,255,255,.8);
+  color: rgba(0,0,0,.25);
   font-size: 1rem;
   z-index: 5;
   transition: color .3s linear;
 }
 
   .refreshIcon:hover {
-    color: #fff;
+    color: #6c757d;
   }