添加校验

src/views/account/components/Modal2.vue

@@ -1,236 +1,250 @@
-<template>
-  <div class="modal-backdrop" @mousewheel="mousewheel">
-    <div class="modal">
-      <div class="modal-header">
-        <span>编辑</span>
-      </div>
-      <div class="modal-body">
-        <div class="bodyRow">
-          <div class="contentCol1">
-            <span>平台名称</span>
-            <div>{{ editData.platformName }}</div>
-          </div>
-        </div>
-        <div class="bodyRow">
-          <div class="contentCol1">
-            <span>平台账号</span>
-            <input type="text" v-model="accountValue" />
-          </div>
-        </div>
-        <div class="bodyRow">
-          <div class="contentCol1">
-            <span>是否认证</span>
-            <select name="identify" v-model="flag" >
-              <option>{{editData.authorizationName}}</option>
-              <option>{{editData.authorizationName === '是'? '否':'是'}}</option>
-            </select>
-          </div>
-        </div>
-        <div class="bodyRow">
-          <div class="contentCol1">
-            <span>粉丝数</span>
-            <input type="number" v-model="fansNum" />
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn-confirm" @click="confirm(),closeSelf()">
-          确认
-        </button>
-        <button type="button" class="btn-close" @click="closeSelf">取消</button>
-      </div>
-    </div>
-  </div>
-</template>
- 
-<script>
-export default {
-  name: "Modal",
-  props: {
-    editData: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-  },
-  data() {
-    return {
-      formData: new FormData(),
-      accountValue: this.editData["accountCode"],
-      fansNum: this.editData["fansCount"],
-      flag: this.editData.authorizationName,
-    };
-  },
-  methods: {
-    closeSelf() {
-      this.$emit("closeme");
-    },
-    confirm() {
-      /* this.formData.append("dataset_title", this.dataset_title);
-      this.formData.append("dataset_link", this.dataset_link);
-
-      this.$http({
-        method: "post",
-        url: "/auth/checkSign",
-        data: {
-          //  token: token,  
-          //this.$http.post("/datasets/", this.formData) 
-        },
-      })
-        .then((r) => {
-          console.log(r);
-          this.$notify({
-            title: "成功",
-            message: "这是一条成功的提示消息",
-            type: "success",
-          });
-          this.$router.push({ path: "/filemanage/data" });
-        })
-        .catch((e) => {
-          console.log(e);
-          this.$notify.error({
-            title: "失败",
-            message: "创建数据集失败",
-          });
-        }); */
-      if (!this.accountValue) {
-        alert('请填写平台账号');
-        return
-      } 
-      if (this.fansNum < 0) {
-        alert('粉丝数量填写错误');
-        return
-      }
-      this.$emit("submit", this.accountValue, this.fansNum, this.flag, this.editData);
-    },
-    mousewheel: function (e) {
-      e.preventDefault();
-    },
-  },
-  created() {
-    console.log(this.editData, 'edit');
-  },
-};
-</script>
-
-<style scoped lang="less">
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: rgba(241, 241, 241, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.modal {
-  background-color: #eeeeee;
-  box-shadow: 2px 2px 20px 1px;
-  overflow-x: auto;
-  display: flex;
-  flex-direction: column;
-  border-radius: 0px;
-  width: 663px;
-  transform: translateY(-100px);
-}
-.modal-header {
-  border-bottom: 1px solid #eee;
-  color: #313131;
-  justify-content: space-between;
-  padding: 15px;
-  display: flex;
-  border-bottom: 1px solid #e3e3e3;
-}
-.modal-header span {
-  font-size: 16px;
-  font-weight: bold;
-}
-.modal-footer {
-  border-top: 1px solid #eee;
-  justify-content: center;
-  padding: 15px;
-  display: flex;
-}
-.modal-footer button {
-  width: 90px;
-  margin-left: 0px;
-}
-.modal-footer button:nth-child(1) {
-  margin-right: 80px;
-}
-.modal-body {
-  position: relative;
-  padding: 20px 100px 20px 100px;
-}
-.modal-body span,
-select,
-input,
-div {
-  font-size: 14px;
-}
-
-.btn-close,
-.btn-confirm {
-  border-radius: 8px;
-  margin-left: 16px;
-  width: 56px;
-  height: 36px;
-  border: none;
-  cursor: pointer;
-}
-.btn-close {
-  color: #313131;
-  background-color: gray;
-}
-.btn-confirm {
-  color: #fff;
-  background-color: #0056a0;
-}
-.bodyRow {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 4px;
-}
-.bodyRow span {
-  width: 80px;
-  margin: 10px;
-}
-.bodyRow select {
-  width: 120px;
-}
-/* .bodyRow input {
-  width: 480px;
-} */
-.bodyRow select,
-input {
-  padding: 2px;
-}
-.contentCol1 {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-.contentCol1 span {
-  width: 80px;
-  margin: 10px;
-  margin-right: 30px;
-}
-.contentCol1 div,
-input {
-  width: 240px;
-}
-.contentCol2 {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  width: 363px;
-}
-.timeWidth input {
-  width: 150px;
-}
-</style>
- 
+<template>
+  <div class="modal-backdrop" @mousewheel="mousewheel">
+    <div class="modal">
+      <div class="modal-header">
+        <span>编辑</span>
+      </div>
+      <div class="modal-body">
+        <div class="bodyRow">
+          <div class="contentCol1">
+            <span>平台名称</span>
+            <div>{{ editData.platformName }}</div>
+          </div>
+        </div>
+        <div class="bodyRow">
+          <div class="contentCol1">
+            <span>平台账号</span>
+            <input type="text" v-model="accountValue" @blur="checkVal()"/>
+          </div>
+        </div>
+        <div v-show="showCheck" style="color: red;font-size: 12px;text-align:center;">平台账号名称不能包含中文及空格</div>
+        <div class="bodyRow">
+          <div class="contentCol1">
+            <span>是否认证</span>
+            <select name="identify" v-model="flag" >
+              <option>{{editData.authorizationName}}</option>
+              <option>{{editData.authorizationName === '是'? '否':'是'}}</option>
+            </select>
+          </div>
+        </div>
+        <div class="bodyRow">
+          <div class="contentCol1">
+            <span>粉丝数</span>
+            <input type="number" v-model="fansNum" />
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn-confirm" @click="confirm(),closeSelf()">
+          确认
+        </button>
+        <button type="button" class="btn-close" @click="closeSelf">取消</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Modal",
+  props: {
+    editData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      formData: new FormData(),
+      accountValue: this.editData["accountCode"],
+      fansNum: this.editData["fansCount"],
+      flag: this.editData.authorizationName,
+      showCheck:false
+    };
+  },
+  methods: {
+    closeSelf() {
+      this.$emit("closeme");
+    },
+    checkVal(){
+      //let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
+
+      let reg = new RegExp("[\\u4E00-\\u9FFF\\u0020]+", "g");
+      if(this.editData.platformName === '微信订阅号' || this.editData.platformName === '微信服务号'){
+        this.showCheck  = reg.test(this.accountValue);
+      }
+    },
+    confirm() {
+      /* this.formData.append("dataset_title", this.dataset_title);
+      this.formData.append("dataset_link", this.dataset_link);
+
+      this.$http({
+        method: "post",
+        url: "/auth/checkSign",
+        data: {
+          //  token: token,
+          //this.$http.post("/datasets/", this.formData)
+        },
+      })
+        .then((r) => {
+          console.log(r);
+          this.$notify({
+            title: "成功",
+            message: "这是一条成功的提示消息",
+            type: "success",
+          });
+          this.$router.push({ path: "/filemanage/data" });
+        })
+        .catch((e) => {
+          console.log(e);
+          this.$notify.error({
+            title: "失败",
+            message: "创建数据集失败",
+          });
+        }); */
+      if (!this.accountValue) {
+        alert('请填写平台账号');
+        return
+      }
+      if (this.showCheck) {
+        alert('平台账号名称不能包含中文及空格');
+        return
+      }
+      if (this.fansNum < 0) {
+        alert('粉丝数量填写错误');
+        return
+      }
+      this.$emit("submit", this.accountValue, this.fansNum, this.flag, this.editData);
+    },
+    mousewheel: function (e) {
+      e.preventDefault();
+    },
+  },
+  created() {
+    console.log(this.editData, 'edit');
+  },
+};
+</script>
+
+<style scoped lang="less">
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(241, 241, 241, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.modal {
+  background-color: #eeeeee;
+  box-shadow: 2px 2px 20px 1px;
+  overflow-x: auto;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0px;
+  width: 663px;
+  transform: translateY(-100px);
+}
+.modal-header {
+  border-bottom: 1px solid #eee;
+  color: #313131;
+  justify-content: space-between;
+  padding: 15px;
+  display: flex;
+  border-bottom: 1px solid #e3e3e3;
+}
+.modal-header span {
+  font-size: 16px;
+  font-weight: bold;
+}
+.modal-footer {
+  border-top: 1px solid #eee;
+  justify-content: center;
+  padding: 15px;
+  display: flex;
+}
+.modal-footer button {
+  width: 90px;
+  margin-left: 0px;
+}
+.modal-footer button:nth-child(1) {
+  margin-right: 80px;
+}
+.modal-body {
+  position: relative;
+  padding: 20px 100px 20px 100px;
+}
+.modal-body span,
+select,
+input,
+div {
+  font-size: 14px;
+}
+
+.btn-close,
+.btn-confirm {
+  border-radius: 8px;
+  margin-left: 16px;
+  width: 56px;
+  height: 36px;
+  border: none;
+  cursor: pointer;
+}
+.btn-close {
+  color: #313131;
+  background-color: gray;
+}
+.btn-confirm {
+  color: #fff;
+  background-color: #0056a0;
+}
+.bodyRow {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 4px;
+}
+.bodyRow span {
+  width: 80px;
+  margin: 10px;
+}
+.bodyRow select {
+  width: 120px;
+}
+/* .bodyRow input {
+  width: 480px;
+} */
+.bodyRow select,
+input {
+  padding: 2px;
+}
+.contentCol1 {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.contentCol1 span {
+  width: 80px;
+  margin: 10px;
+  margin-right: 30px;
+}
+.contentCol1 div,
+input {
+  width: 240px;
+}
+.contentCol2 {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 363px;
+}
+.timeWidth input {
+  width: 150px;
+}
+</style>
+