个人中心账号设置添加校验

src/views/forgetpassword/index.vue

@@ -207,7 +207,7 @@ export default {
       }
     }
     return {
-      active: 1,
+      active: 0,
       Img,
       form: {
         EmailOrPhone: '',

src/views/trials/trials-myinfo/account.vue

@@ -3,9 +3,14 @@
     <div class="trial-myinfo-right-box">
       <div class="trial-myinfo-head">
         <!-- 账号信息 -->
-        {{ $t("trials:trials-myinfo:title:accountInfo") }}
+        {{ $t('trials:trials-myinfo:title:accountInfo') }}
       </div>
-      <el-form label-position="right" label-width="100px">
+      <el-form
+        label-position="right"
+        label-width="100px"
+        :rules="rule"
+        :model="userForm"
+      >
         <!-- 用户名 -->
         <el-form-item
           :label="$t('trials:trials-myinfo:form:userName')"
@@ -27,18 +32,18 @@
             size="small"
             @click="setNewUserName"
           >
-            {{ $t("trials:trials-myinfo:button:update") }}
+            {{ $t('trials:trials-myinfo:button:update') }}
           </el-button>
         </el-form-item>
         <!-- 电话 -->
         <el-form-item
           :label="$t('trials:trials-myinfo:form:phone')"
           style="margin-bottom: 5px"
-          prop="UserName"
+          prop="Phone"
         >
           <span>{{ user.Phone }}</span>
         </el-form-item>
-        <el-form-item label="" style="position: relative" prop="UserName">
+        <el-form-item label="" style="position: relative" prop="Phone">
           <el-input
             v-model="userForm.Phone"
             :placeholder="$t('trials:trials-myinfo:form:phone')"
@@ -51,14 +56,14 @@
             size="small"
             @click="setNewPhone"
           >
-            {{ $t("trials:trials-myinfo:button:update") }}
+            {{ $t('trials:trials-myinfo:button:update') }}
           </el-button>
         </el-form-item>
         <!-- 邮箱 -->
         <el-form-item
           :label="$t('trials:trials-myinfo:form:email')"
           style="margin-bottom: 5px"
-          prop="UserName"
+          prop="EMail"
         >
           <span>{{ user.EMail }}</span>
         </el-form-item>
@@ -100,7 +105,7 @@
             size="small"
             @click="setNewEmail"
           >
-            {{ $t("trials:trials-myinfo:button:update") }}
+            {{ $t('trials:trials-myinfo:button:update') }}
           </el-button>
         </el-form-item>
       </el-form>
@@ -114,19 +119,19 @@ import {
   setNewEmail,
   setNewPhone,
   setNewUserName,
-} from "@/api/system/user.js";
-import { removeToken } from "@/utils/auth";
-import password from "./password.vue";
-var timer = "";
-var countdown = 60;
+} from '@/api/system/user.js'
+import { removeToken } from '@/utils/auth'
+import password from './password.vue'
+var timer = ''
+var countdown = 60
 export default {
-  name: "account",
+  name: 'account',
   components: { password },
   props: {
     user: {
       required: true,
       default: () => {
-        return {};
+        return {}
       },
     },
     IsCanConnectInternet: {
@@ -138,108 +143,136 @@ export default {
     return {
       userForm: {},
       sendDisabled: true,
-      sendTitle: this.$t("trials:trials-myinfo:button:getVCode"),
-    };
+      sendTitle: this.$t('trials:trials-myinfo:button:getVCode'),
+      rule: {
+        UserName: [
+          {
+            validator: (rule, value, callback) => {
+              if (!value) return callback()
+              var lang = zzSessionStorage.getItem('lang')
+                ? zzSessionStorage.getItem('lang')
+                : 'zh'
+              /* eslint-disable */
+              var reg1 = /^[a-zA-Z0-9_]{4,16}$/ //密码必须是8位以上、必须含有字母、数字、特殊符号
+              if (!reg1.test(value)) {
+                callback(
+                  lang === 'zh'
+                    ? new Error(
+                        '1）用户名字符长度最小为4个字符，最大为16个字符，只可使用字母、数字、下划线；'
+                      )
+                    : new Error(
+                        'the username must have:1) At least 4 characters;2) At most 16 characters;3)Only letters, numbers, and underscores are allowed.'
+                      )
+                )
+              } else {
+                callback()
+              }
+            },
+            trigger: 'blur',
+          },
+        ],
+      },
+    }
   },
   methods: {
     setNewEmail() {
       setNewEmail(this.userForm.EMail, this.userForm.VerificationCode).then(
         () => {
-          this.userForm.EMail = "";
-          this.userForm.VerificationCode = "";
+          this.userForm.EMail = ''
+          this.userForm.VerificationCode = ''
           this.$message.success(
-            this.$t("trials:trials-myinfo:message:updateSuccessfully")
-          );
-          this.$emit("getUserInfo");
+            this.$t('trials:trials-myinfo:message:updateSuccessfully')
+          )
+          this.$emit('getUserInfo')
         }
-      );
+      )
     },
     async setNewUserName() {
       try {
         let confirm = await this.$confirm(
-          this.$t("trials:trials-myInfo:confirmMessage:updateUserName"),
+          this.$t('trials:trials-myInfo:confirmMessage:updateUserName'),
           {
-            type: "warning",
+            type: 'warning',
             distinguishCancelAndClose: true,
-            confirmButtonText: this.$t("common:button:confirm"),
-            cancelButtonText: this.$t("common:button:cancel"),
+            confirmButtonText: this.$t('common:button:confirm'),
+            cancelButtonText: this.$t('common:button:cancel'),
           }
-        );
-        if (confirm !== "confirm") return;
-        let res = await setNewUserName(this.userForm.UserName);
+        )
+        if (confirm !== 'confirm') return
+        let res = await setNewUserName(this.userForm.UserName)
         if (res.IsSuccess) {
-          this.userForm.UserName = "";
+          this.userForm.UserName = ''
           this.$message.success(
-            this.$t("trials:trials-myinfo:message:updateSuccessfully")
-          );
-          this.$emit("getUserInfo");
-          removeToken();
-          this.logout();
+            this.$t('trials:trials-myinfo:message:updateSuccessfully')
+          )
+          this.$emit('getUserInfo')
+          removeToken()
+          this.logout()
         }
       } catch (err) {
-        console.log(err);
+        console.log(err)
       }
     },
     setNewPhone() {
       setNewPhone(this.userForm.Phone).then(() => {
-        this.userForm.Phone = "";
+        this.userForm.Phone = ''
         this.$message.success(
-          this.$t("trials:trials-myinfo:message:updateSuccessfully")
-        );
-        this.$emit("getUserInfo");
-      });
+          this.$t('trials:trials-myinfo:message:updateSuccessfully')
+        )
+        this.$emit('getUserInfo')
+      })
     },
     handleEmailChange() {
       var reg =
-        /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
+        /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
       if (this.userForm.EMail && reg.test(this.userForm.EMail)) {
-        this.sendDisabled = false;
+        this.sendDisabled = false
       } else {
-        this.sendDisabled = true;
+        this.sendDisabled = true
       }
     },
     sendVerificationCode() {
       sendVerificationCode(this.userForm.EMail).then(() => {
-        this.settime(this);
+        this.settime(this)
         // 发送成功
         this.$message.success(
-          this.$t("trials:trials-myinfo:message:sendSuccessfully")
-        );
-      });
+          this.$t('trials:trials-myinfo:message:sendSuccessfully')
+        )
+      })
     },
     settime(obj) {
       if (countdown === 0) {
-        obj.sendDisabled = false;
-        obj.sendTitle = this.$t("trials:trials-myinfo:button:getVCode"); // '获取验证码'
-        countdown = 60;
-        clearTimeout(timer);
-        return;
+        obj.sendDisabled = false
+        obj.sendTitle = this.$t('trials:trials-myinfo:button:getVCode') // '获取验证码'
+        countdown = 60
+        clearTimeout(timer)
+        return
       } else {
-        obj.sendDisabled = true;
+        obj.sendDisabled = true
         obj.sendTitle = `${this.$t(
-          "trials:trials-myinfo:button:wait"
-        )}(${countdown}s)`;
-        countdown--;
+          'trials:trials-myinfo:button:wait'
+        )}(${countdown}s)`
+        countdown--
         // eslint-disable-next-line no-self-assign
-        countdown = countdown;
+        countdown = countdown
         timer = setTimeout(function () {
-          obj.settime(obj);
-        }, 1000);
+          obj.settime(obj)
+        }, 1000)
       }
     },
     async logout() {
       /* eslint-disable */
-      var loginType = zzSessionStorage.getItem("loginType");
-      await this.$store.dispatch("user/logout");
+      var loginType = zzSessionStorage.getItem('loginType')
+      await this.$store.dispatch('user/logout')
       if (loginType) {
-        this.$router.push(`/login?loginType=${loginType}`);
+        this.$router.push(`/login?loginType=${loginType}`)
       } else {
-        this.$router.push(`/login`);
+        this.$router.push(`/login`)
       }
-      this.$i18n.locale = "zh";
-      this.setLanguage("zh");
-      this.$updateDictionary();
+      this.$i18n.locale = 'zh'
+      this.setLanguage('zh')
+      this.$updateDictionary()
     },
   },
-};
+}
 </script>