KERNEL-6054 feat: textarea支持validationChecker以弹出气泡弹窗提示

changelog.md

@@ -1,4 +1,7 @@
 # 更新日志
+2.0(2020-11)
+- bi.textarea_editor支持气泡提示报错
+
 2.0(2020-10)
 - 支持Composition API
 - pane和loadingPane支持加载时自定义提示文本

demo/js/base/editor/demo.textarea_editor.js

@@ -8,7 +8,11 @@ Demo.CodeEditor = BI.inherit(BI.Widget, {
             cls: "bi-border",
             width: 600,
             height: 400,
-            watermark: "请输入内容"
+            watermark: "请输入内容",
+            errorText: "检测内容有误",
+            validationChecker: function (v) {
+                return BI.isNotEmptyString(v);
+            },
         });
         editor.on(BI.TextAreaEditor.EVENT_FOCUS, function () {
             BI.Msg.toast("Focus");

src/base/single/editor/editor.textarea.js

@@ -8,7 +8,11 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
     _defaultConfig: function () {
         return BI.extend(BI.TextAreaEditor.superclass._defaultConfig.apply(), {
             baseCls: "bi-textarea-editor",
-            value: ""
+            value: "",
+            errorText: "",
+            validationChecker: function () {
+                return true;
+            },
         });
     },
 
@@ -38,15 +42,15 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
         });
 
         this.content.element.on("input propertychange", function (e) {
+            self._checkError();
             self._checkWaterMark();
             self.fireEvent(BI.TextAreaEditor.EVENT_CHANGE);
         });
 
         this.content.element.focus(function () {
-            if (self.isValid()) {
+            self._checkError();
-                self._focus();
+            self._focus();
-                self.fireEvent(BI.TextAreaEditor.EVENT_FOCUS);
+            self.fireEvent(BI.TextAreaEditor.EVENT_FOCUS);
-            }
             BI.Widget._renderEngine.createElement(document).bind("mousedown." + self.getName(), function (e) {
                 if (BI.DOM.isExist(self) && !self.element.__isMouseInBounds__(e)) {
                     BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
@@ -55,10 +59,9 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
             });
         });
         this.content.element.blur(function () {
-            if (self.isValid()) {
+            self._setErrorVisible(false);
-                self._blur();
+            self._blur();
-                self.fireEvent(BI.TextAreaEditor.EVENT_BLUR);
+            self.fireEvent(BI.TextAreaEditor.EVENT_BLUR);
-            }
             BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
         });
         if (BI.isKey(o.value)) {
@@ -112,6 +115,10 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
         }
     },
 
+    _checkError: function () {
+        this._setErrorVisible(this.isEnabled() && !this.options.validationChecker(this.getValue()));
+    },
+
     _focus: function () {
         this.content.element.addClass("textarea-editor-focus");
         this._checkWaterMark();
@@ -122,6 +129,20 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
         this._checkWaterMark();
     },
 
+    _setErrorVisible: function (b) {
+        var o = this.options;
+        var errorText = o.errorText;
+        if (BI.isFunction(errorText)) {
+            errorText = errorText(BI.trim(this.getValue()));
+        }
+        if (!this.disabledError && BI.isKey(errorText)) {
+            BI.Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, {
+                adjustYOffset: 2
+            });
+            return BI.Bubbles.get(this.getName());
+        }
+    },
+
     focus: function () {
         this._focus();
         this.content.element.focus();
@@ -138,6 +159,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
 
     setValue: function (value) {
         this.content.element.val(value);
+        this._checkError();
         this._checkWaterMark();
     },