fix: 增加用户名字段长度

pages/register.vue

@@ -2,10 +2,10 @@
   <div class="page-container login-container">
     <el-card class="login-card">
       <h2 class="login-card__title login-card__item">注 册</h2>
-      <el-input ref="name" v-model="name" placeholder="请输入昵称, 长度为1-10个字符" maxlength="10" class="login-card__item"  autofocus></el-input>
-      <el-input ref="username" v-model="username" placeholder="请输入用户名，这是你个唯一标识，只允许英文数字字符，长度为1-10" maxlength="10" class="login-card__item"></el-input>
-      <el-input ref="password" v-model="password" type="password" placeholder="请输入密码, 长度为8-30个字符，只能包括数字与字母" maxlength="20" class="login-card__item"></el-input>
-      <el-input ref="passwordConfirm" v-model="passwordConfirm" type="password" placeholder="请再次输入密码" maxlength="20" class="login-card__item"></el-input>
+      <el-input ref="name" v-model="name" placeholder="请输入昵称, 长度为1-20个字符" maxlength="20" class="login-card__item"  autofocus></el-input>
+      <el-input ref="username" v-model="username" placeholder="请输入用户名，这是你个唯一标识，只允许英文数字字符，长度为1-20" maxlength="20" class="login-card__item"></el-input>
+      <el-input ref="password" v-model="password" type="password" placeholder="请输入密码, 长度为8-30个字符，只能包括数字与字母" minlength="8" maxlength="30" class="login-card__item"></el-input>
+      <el-input ref="passwordConfirm" v-model="passwordConfirm" type="password" placeholder="请再次输入密码" minlength="8" maxlength="30" class="login-card__item"></el-input>
       <el-input ref="email" v-model="email" placeholder="请输入邮箱" maxlength="320" class="login-card__item" autofocus></el-input>
       <el-input ref="phone" v-model="phone"  oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号" minlength='11' maxlength='11' class="login-card__item"></el-input>
       <el-input ref="identifyCode" v-model="identifyCode" placeholder="请输入验证码" maxlength="6" class="login-card__short-item"></el-input>
@@ -96,7 +96,7 @@ export default {
         this.$refs.name.focus()
         return false
       }
-      if (this.name.length > 10) {
+      if (this.name.length > 20) {
         this.$message({
           showClose: true,
           message: '昵称过长',
@@ -106,6 +106,24 @@ export default {
         return false
       }
 
+      if (this.username.length === 0) {
+        this.$message({
+          showClose: true,
+          message: '用户名不得为空',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.username.length > 20) {
+        this.$message({
+          showClose: true,
+          message: '用户名过长',
+          type: 'error'
+        })
+        this.$refs.username.focus()
+        return false
+      }
+
       if (this.password.length < 8) {
         if (this.password.length === 0) {
           this.$message({
@@ -132,7 +150,7 @@ export default {
         this.$refs.password.focus()
         return false
       }
-      if(!/^[0-9A-Za-z]{8,30}$/.test(this.password)) {
+      if (!/^[0-9A-Za-z]{8,30}$/.test(this.password)) {
         this.$message({
           showClose: true,
           message: '密码只能包括大小写字母与数字',
@@ -200,15 +218,6 @@ export default {
         return false
       }
 
-      if (this.username.length === 0) {
-        this.$message({
-          showClose: true,
-          message: '用户名不得为空',
-          type: 'error'
-        })
-        return false
-      }
-
       if (this.identifyCode.length === 0) {
         this.$message({
           showClose: true,
@@ -244,7 +253,7 @@ export default {
         phone: this.phone,
         password: this.password,
         name: this.name,
-        username:this.username,
+        username: this.username,
         email: this.email,
         identifyCode: this.identifyCode
       }).then((res) => {