输入框长度限制

src/components/login/ForgetPassword.vue

@@ -321,7 +321,7 @@ export default {
     // 验证密码
     changeParssword() {
       if (this.password) {
-        let reg = /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{8,12}$/;
+        let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,20}$/;
         let result = reg.test(this.password);
         if (result) {
           this.passwordError = false;
@@ -349,7 +349,7 @@ export default {
         return;
       }
       if (this.password == "") {
-        this.$message.warning("请输入密码。");
+        this.$message.warning("请输入密码");
         return;
       }
       if (this.verification_code == "") {

src/components/login/registration.vue

@@ -6,6 +6,7 @@
       <!-- 用户信息 -->
       <p class="p2">{{ $t("Key24") }}</p>
     </div>
+
     <div class="form" v-loading="loading">
       <!-- 
         :show-message="false"
@@ -27,7 +28,11 @@
             :placeholder="$t('Key26')"
             v-model="ruleForm.Username"
             @input="trimInput('Username')"
+            @focus="getFocus('isUsername')"
+            @blur="getBlur('isUsername')"
+            maxlength="15"
           ></el-input>
+          <span class="error-notice" v-if="isUsername">最多15个字符</span>
         </el-form-item>
         <el-form-item prop="Realname">
           <span slot="label" class="lable">
@@ -37,8 +42,12 @@
           <el-input
             :placeholder="$t('Key28')"
             v-model="ruleForm.Realname"
-            @input="trimInput('Realname')"
+            @change="trimInput('Realname')"
+            @focus="getFocus('isRealname')"
+            @blur="getBlur('isRealname')"
+            maxlength="30"
           ></el-input>
+          <span class="error-notice" v-if="isRealname">最多30个字符</span>
         </el-form-item>
         <el-form-item prop="FromWhereCode" class="Noafter">
           <span slot="label" class="lable">
@@ -109,6 +118,7 @@
             v-model="ruleForm.email"
             :placeholder="$t('Key34')"
             @input="trimInput('email')"
+            maxlength="200"
           />
         </el-form-item>
         <el-form-item prop="verification_code">
@@ -152,6 +162,7 @@
             :type="parsswordType"
             @change="changeParssword"
             @input="trimInput('password')"
+            maxlength="12"
           />
           <img
             v-show="parsswordType == 'password'"
@@ -186,6 +197,7 @@
             :type="twoPasswordType"
             @change="Changetowpassword"
             @input="trimInput('Twopassword')"
+            maxlength="12"
           />
           <img
             v-show="twoPasswordType == 'password'"
@@ -252,6 +264,7 @@ export default {
     //这里存放数据
     return {
       ruleForm: {
+        name: "",
         Username: "",
         Realname: "",
         FromWhereCode: "",
@@ -266,7 +279,11 @@ export default {
       ageeemnt: false,
       rules: {
         Username: [
-          { required: true, message: "Please enter", trigger: "blur" },
+          {
+            required: true,
+            message: "请输入用户名",
+            trigger: "blur",
+          },
         ],
         Realname: [
           {
@@ -329,6 +346,8 @@ export default {
       passwordError: false,
       passwordErrorTwo: false,
       TimeZoneList: null, //时区列表
+      isUsername: false,
+      isRealname: false,
     };
   },
   //计算属性 类似于data概念
@@ -339,6 +358,12 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    getFocus(key) {
+      this[key] = true;
+    },
+    getBlur(key) {
+      this[key] = false;
+    },
     // 去除空格
     trimInput(key) {
       console.log(key);
@@ -403,7 +428,8 @@ export default {
     // 验证密码
     changeParssword() {
       if (this.ruleForm.password) {
-        let reg = /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{8,12}$/;
+        //let reg = /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{8,12}$/;
+        let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{8,12}$/;
         let result = reg.test(this.ruleForm.password);
         if (result) {
           this.passwordError = false;
@@ -740,6 +766,16 @@ export default {
     }
   }
 }
+.el-form-item__content {
+  position: relative;
+}
+.error-notice {
+  font-size: 12px;
+  color: #ccc;
+  position: absolute;
+  left: 0px;
+  bottom: -27px;
+}
 </style>
 
 <style lang="scss">