Browse Source

feat: 添加密码限制提示

Jinyao 5 years ago
parent
commit
763fdfaeb0
1 changed files with 10 additions and 3 deletions
  1. 10 3
      pages/register.vue

+ 10 - 3
pages/register.vue

@@ -4,7 +4,7 @@
       <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="请输入密码, 长度为6-20个字符" maxlength="20" 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="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>
@@ -106,7 +106,7 @@ export default {
         return false
       }
 
-      if (this.password.length < 6) {
+      if (this.password.length < 8) {
         if (this.password.length === 0) {
           this.$message({
             showClose: true,
@@ -123,7 +123,7 @@ export default {
         this.$refs.password.focus()
         return false
       }
-      if (this.password.length > 20) {
+      if (this.password.length > 30) {
         this.$message({
           showClose: true,
           message: '密码过长',
@@ -132,6 +132,13 @@ export default {
         this.$refs.password.focus()
         return false
       }
+      if(!/^[0-9A-Za-z]{8,30}$/.test(this.password)) {
+        this.$message({
+          showClose: true,
+          message: '密码只能包括大小写字母与数字',
+          type: 'error'
+        })
+      }
 
       if (this.passwordConfirm !== this.password) {
         this.$message({