vue2项目的登录集合手机号登录/用户名登录

1.登录方式的切换

功能介绍：
1)当用户点击 短信验证 时，显示手机号、验证码的输入界面；
2)当用户点击 密码登录 时，显示用户名、密码、图形验证码的输入界面。

短信验证界面：

密码登录界面：

思路：
1）给“短信登录”和“密码登录”取一个共同轮流使用的class【v-bind动态绑定class。语法规则： v-bind: class = {className: booleanValue} 或者 : class = {className: booleanValue}】，并且设置好该class被选中的CSS样式。
如：

.on的stylus样式 ：

Login.vue的 < template >对应内容 ：

<div class="login_header_title">
        <!--通过绑定class实现点击不同链接，样式就转换到哪个链接。下面的文本框也要相对应的：class绑定-->
        <a href="javascript:" :class="{on: loginWay}" @click="loginWay = true">短信登录</a>
        <a href="javascript:" :class="{on: !loginWay}" @click="loginWay  = false">密码登录</a>
</div>

Login.vue的 < script >对应内容 ：

export default {
 data () {
   return {
     loginWay: true, // 如果是true, 则表示短信登录；如果是false, 则表示密码登录 
   }
 }

2）同样的，给“短信登录”和“密码登录”输入界面的各自最外一层div，动态绑定一个轮流使用的class【v-bind动态绑定class】，并且设置好该class被选中的CSS样式。

.on的stylus对应样式 ：

Login.vue的 < template >对应内容 ：

 <div class="login_content">
<!-- .prevent: 阻止网页默认行为，防止网页提交form-->
 	<form @submit.prevent="login"> 
 		<!--手机登录板块，只有loginWay表示为手机登录的true时，才触发on-->
 		<div :class="{on: loginWay}">
 		...
 		</div>
 		<!--密码登录板块, 只有loginWay表示为密码登录的false时，!loginWay才为false， 才触发on-->
 		<div :class="{on: !loginWay}">
 		...
 		</div>
	</form>
</div>

2.手机号合法检查

功能介绍：
只有用户输入正确的手机号格式，右边的验证码按钮才能被激活。

未输入，或者输入错误的格式时 ：

输入正确的手机号格式(即11个数字)时 ：

思路：
1）按钮是否被激活，可以使用CSS伪类 :disabled。当其为false时，按钮将会被禁用；
2) 可以设定按钮的文本颜色样式，表示按钮的是否被激活。

Login.vue的 < template >对应内容 ：

<div class="login_content">
 	<form @submit.prevent="login"> 
 		<!--手机登录板块-->
 		<div :class="{on: loginWay}">
 		 <section class="login_message">
              <input type="tel" maxlength="11" placeholder="手机号" v-model="phone">
              <!--只有当rightPhone为true（即输入正确的11位手机号码格式），即!rightPhone为false，该按钮才被激活-->
              <button :disabled="!rightPhone" class="get_verification"
                      :class="{right_phone: rightPhone}">
                      获取验证码
              </button>
            </section>
 		...
 		</div>
	</form>
</div>

rightPhone是一个返回布尔值的计算属性

Login.vue的 < script >对应内容 ：

export default {
...
computed: {
   rightPhone () {
     // 通过正则表达式来判断用户所输入的值是否是11个数字，如果是，则使用该方法的标签的样式发生改变
     // 1.正则表达式的式子都是在/ /当中的
     // 2. ^1  表示输入的第一个值是1
     // 3. \d  表示匹配一个数字，范围是[0, 9]
     // 4. {10} 表示匹配了前面一个字符刚好出现了10次，即[0, 9]范围内的数字获取到10个
     return /^1\d{10}$/.test(this.phone)
   }
 }

.on的stylus样式 ：

3.手机验证码的倒计时效果

功能介绍：
当用户点击 获取验证码 时，将会出现验证码已发送之后的倒计时效果

点击 获取验证码 按钮之后：

思路：
1）按钮的文本有2种选择，一是“发送验证码”文本，一是倒计时文本。它们是二选一的关系，可以使用 三目运算符 实现文本的切换；
2）定义一个记录倒计时长的data变量，当用户点击按钮时，触发倒计时的方法。

Login.vue的 < template >对应内容 ：

<div class="login_content">
 	<form @submit.prevent="login"> 
 		<!--手机登录板块-->
 		<div :class="{on: loginWay}">
 		 <section class="login_message">
              <input type="tel" maxlength="11" placeholder="手机号" v-model="phone">
              <!--只有当rightPhone为true（即输入正确的11位手机号码格式），即!rightPhone为false，该按钮才被激活-->
              <button :disabled="!rightPhone" class="get_verification"
                      :class="{right_phone: rightPhone}" @click.prevent="getCode">
                {{computeTime > 0 ? `已发送${computeTime}s` : '获取验证码'}}</button>
            </section>
 		...
 		</div>
	</form>
</div>

Login.vue的 < script >对应内容 ：

export default {
data () {
   return {
     computeTime: 0, // 关于验证码发送的倒计时样式
   }
 },

methods: {
   // 异步获取短信验证码
   getCode () {
     // 如果当前没有倒计时 注意:
     if (!this.computeTime) {
       // 制定发送验证码的倒计时长
       this.computeTime = 30
       // 开始倒计时
       const intervalId = setInterval(() => {
         this.computeTime--
         // 如果数值小于0，那么可以停止倒计时了
         if (this.computeTime < 0) {
           clearInterval(intervalId)
         }
       }, 1000)
     }
   },

4.切换显示或隐藏密码

功能介绍：
在密码登录的输入界面，用户能够开启是否显示密码的按钮。

当用户选择隐藏密码 ：

当用户选择显示密码 ：

思路：
1)密码和文本的输入是 < input > 的2种type，那么可以使用 v-if 和 v-else来决定显示 哪个< input >；
2）本输入框的右边按钮包括3个内容：最外一层的按钮总< div >，以及内部的文本< div >和圆环样式的< div >，具体介绍可看代码。

Login.vue的 < template >对应内容 ：

<div class="login_content">
 	<form @submit.prevent="login"> 
 		<!--密码登录板块-->
 		<div :class="{on: loginWay}">
 		...
 		 <section class="login_verification">
 		        <!--showPwd是true的话，那么就将显示该< input >-->
                <input type="text" maxlength="8" placeholder="密码" v-if="showPwd" v-model="pwd">
                <input type="password" maxlength="8" placeholder="密码" v-else v-model="pwd">
                <!--这是按钮样式-->
                <!--如果是显示密码，则为on样式，否则为off样式-->
                <div class="switch_button" :class="showPwd? 'on': 'off'" @click="showPwd = !showPwd">
                  <!--这是按钮样式的小圆环-->
                  <div class="switch_circle" :class="{right: showPwd}"></div>
                  <!--这是按钮样式的文本-->
                  <span class="switch_text">{{showPwd? 'psw' : '...'}}</span>
                </div>
              </section>
 		...
 		</div>
	</form>
</div>

Login.vue的 < script >对应内容 ：

export default {
data () {
   return {
    showPwd: true, // 是否显示所输入的密码
   }
 }

Login.vue的 stylus对应样式 ：

5.前台验证提示

这篇好文章是转载于：学新通技术网