vue做登录界面,简单的vue写登录页面
主要介绍了vue登陆页的开发实践，通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。有需要的朋友下面和边肖一起学习。
目录
首先关于输入的验证没什么好说的。记住两点，一是控制输入长度，二是控制格式。二、验证码逻辑：组件使用vant ui，具体用法可以在官网看到。
分几个部分考虑，
一、输入框input的校验: 1.模糊时没有逻辑检查值和格式不一致。
2.限制输入长度的逻辑。比如手机号只能是11位，验证码只能是6位。二、验证码按钮逻辑:
1.在不同的状态下，验证码的颜色，复制，是否可以点击，是否显示计数都需要考虑进去。
2.只有手机号格式正确才能正常点击验证码，所以这里应该有监控手机号。一旦符合格式，验证码就会生效。
3.关于计数器的逻辑。
从以上几点考虑以下几点：
一、input的校验没有可说的，记住俩点，一个控制输入长度，一个控制格式。
1.格式验证
handleblurtel(){
让phonecode verification=/^[1][3,4,5,7,8][0-9]{9}$/；
if(this.form.tel===){
This.errorTxt=请输入您的手机号码//不同情况下的错误提示
}else if(！phonecode verification . test(this . form . tel)){
This.errorTxt=请输入正确格式的手机号码
}否则{
This.errorTxt= //当错误提示有效时记得清除。
返回true
}
},
//需要验证码，验证格式。
handleblurcode(){
if(this.form.code===){
This.errorxtcode=请输入验证码
} else if(this . form . code . length 0 this . form . code . length 6){
This.errorxtcode=请输入正确的验证码格式
}否则{
this.errorTxt=
返回true
}
}
2.长度控制
//限制输入字符串的长度
HanldeInputTel(){//手机号码长度为11位数字。
if(this . form . tel length 11){
this . form . tel=this . form . tel . slice(0，11)
}
},
HandleInputCode(){//验证码保证6位。
if(this.form.code.length6){
this . form . code=this . form . code . slice(0，6)
}
},
二、验证码逻辑：
粘贴html代码：
范菲尔德
v-model=form.code
中心
可清除的
Label=短信验证码
:error-message=errorTxtcode
Placeholder=请输入短信验证码
@input=handleInputCode
@blur=handleblurcode
模板#按钮
button size= small :disabled= BTN status :class= BTN style type= primary @ click= click code
van-count-down:time= time format= ss v-if= count flag===1 @ finish= finish down /van-count-down
span{{countTxt}}/span
/按钮
/模板
/范-菲尔德
Vant-count-down是Vant组件的计数器用法，直接介绍。time为初始化时间，如60s、1min，format为时间格式：小时、分钟、秒等。
@finish是自己的方法，具体的api可以在官网找到，这里不做介绍。
1.初始化按钮状态：
data(){
返回{
表单：{
电话：，
代码：“”
},
错误：，//手机号码错误信息
Erroxtcode: ，//验证码错误提示
BtnStatus:true，//不能点击按钮。
BtnStyle: nomalStyle ，//提升初始化按钮样式
时间：60*1000，//小时数
CountTxt:发送验证码，//初始化按钮副本
CountFlag:0//0:显示副本，1；显示，开始计数。
}
},
1.开始计时：
按钮状态无法点击btnStatus，按钮样式：btnStyle，开始计数：countFlag
//点击按钮开始计时
clickCode(){
this.btnStatus=true
this.btnStyle=`倒计时
This.countFlag=1//开始计时
This.countTxt=//副本为空
},
2.倒计时后：这些参数需要修改。
可以继续点击btnStatus显示复制countFlag和复制内容c countTxt。
//倒计时结束了
finishDown(){
this.btnStyle=`canClick
this.btnStatus=false
This.countTxt= reacquire
this.countFlag=0
},
3.何时触发按钮状态：
当手机号符合格式时，watch对手机号进行监控。
观察：{
表单：{
处理程序(){
if(/^[1][3,4,5,7,8][0-9]{9}$/.test(this.form.tel)){
this.btnStyle=canClick
this.btnStatus=false
}否则{
this.btnStatus=true
}
},
即时：真的，
深：真的
}
},
4.最后，点击提交的简单写法：
//提交用户信息
sumbit(){
let telStatus=this . handleblurtel()
let code status=this . handleblurcode()
if(telStatuscodeStatus){
this.axios.get({})。然后(res={
Console.log(提交成功)
//将后端会议的令牌存储在前端缓存中
localStorage.setItem(token ，res.data.toekn)
//跳转到主页
这个。$router.push({path:/})
})
}
},
1，2，3步可以循序渐进，这样思路就清晰了，不然验证码一会儿这样一会儿那样的显示，会很混乱。所以先完成单个功能的开发，最后写出按钮更改的前置条件，这样思路就清晰了。
文本末尾的样式：正常风格{
背景：# EAEEFD
颜色：# 5E6679
}
按钮{
宽度：161px
身高：61px
边框-半径：31px
行高：61px
字体大小：24px
文本对齐：居中；
}。canClick {
背景色：# 3E64D4
颜色：# FFFFFF
}。倒计时{
背景：# EAEEFD
颜色：#3E64D4
}
关于vue登陆页开发实践的这篇文章就到此为止。有关vue登录页面的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。