vue登录具体实例的正则验证
引⼊了jquery和elementUi
<template>
<div class="mask">
<div class="register">
<div class="back" @click="back">
</div>
<div class="QuickLogin">
<div class="quick" @click="quick">快捷登录</div>
<div class="passLogin"  @click="passLogin">密码登录</div>
</div>
<div class="InputSector" v-show="InputSector">
<div class="input">
<div class="inputsec"><input type="text" maxlength="11" placeholder="⼿机号" class="inputText" v-model="phoneNum" @keyup="phone"></div>              <div class="inputsec"><input type="text" placeholder="验证码" class="inputText text" v-model="yanzhengma"><div class="catchTime" @click="catc hTime" v-show="timimg">获取验证码</div><div class="catchTime  Time" v-show="timimg==false">{{times}}s后重发</div></div>
<div class="inputsec"><input type="submit" class="logon logon1" value="登录" @click="sub" ></div>
</div>
<p class="illustration">免注册，登录即创建账户</p>
</div>
<div class="InputSector2" v-show="InputSector==false">
<div class="input">
<div class="inputsec"> <input type="text"  placeholder="⼿机号" maxlength="11" class="inputText" v-model="phoneNum2" @keyup="phone2"></di v>
<div class="inputsec"><input type="text" placeholder="密码" class="inputText" v-model="password"></div>
<div class="inputsec"><input type="submit" class="logon logon2" value="登录" @click="sub2"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import $ from "jquery";
export default {
name: "Header",
data(){
return{
password:"",
phoneNum:"",
phoneNum2:"",
yanzhengma:"",
timimg:true,
times:60,
InputSector:true
}
},
methods:{
//返回键：时间归于60s
back(){
this.times=60;
this.timimg=true;
},
//变换点击样式
quick(){
$('.quick').css({"border-bottom":"4px solid #FF7DA0"})
$('.passLogin').css({"border-bottom":"none"})
this.InputSector=true
},
passLogin(){
$('.passLogin').css({"border-bottom":"4px solid #FF7DA0"})
$('.quick').css({"border-bottom":"none"})
$('.quick').css({"border-bottom":"none"})
this.InputSector=false
},
//获取验证码倒计时
time(){
let  timer=setInterval(()=> {
this.times--;
if(this.times<0){
clearInterval(timer)
this.times=60;
this.timimg=true;
}
},1000);
},
catchTime(){
this.timimg=false
this.time()
},
//⼿机号的正则验证
phone(){
console.log(this.phoneNum)
if((this.phoneNum).length==11){
let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
if (!st(this.phoneNum)) {
this.$message('⼿机号输⼊错误');
} else {
$(".logon1").css({"background-color":"#FF2661"})          }
}
},
phone2(){
console.log(this.phoneNum2)
if((this.phoneNum2).length==11){
let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
if (!st(this.phoneNum2)) {
this.$message('⼿机号输⼊错误');
} else {
$(".logon2").css({"background-color":"#FF2661"})          }
}
},
//提交时不正确的提⽰
sub(){
if((this.phoneNum)=="" ){
this.$message('请正确填⼊⼿机号');
}else if( (this.yanzhengma)==""){
this.$message('请正确填⼊验证码');
}
},
sub2(){
if((this.phoneNum2)=="" ){
this.$message('请正确填⼊⼿机号');
}else if( (this.password)==""){
this.$message('请正确填⼊密码');
}
}
}
}
</script>
</script>
<style scoped>
.
mask{
position: fixed;
right:0;
top:0;
left:0;
bottom:0;
background-color: rgba(0,0,0,.6);    z-index: 999;
}
.register{
width:453px;
height: 387px;
background-color: #ffffff;
position: absolute;
margin:auto;
top:0;
bottom: 0;
left: 0;
right:0;
}
.QuickLogin{
margin-top: 50px;
height: 33px;
font-size: 20px;
color: #262626
}
.QuickLogin{
display: flex;
justify-content: space-evenly;
}
.QuickLogin>div{
padding-bottom: 9px;
}
.quick{
border-bottom: 4px solid #FF7DA0;  }
.inputText{
width:328px;
height:34px;
padding: 7px 0 7px 13px;
font-size: 14px;
}
.text{
width:221px;
height:34px;
padding: 7px 0 7px 13px;
font-size: 14px;
display: inline-block;
}
.InputSector, .InputSector2{
width:343px;
margin:0 auto;
padding:50px 55px;
}
.input>.inputsec{
border: 1px solid #e5e5e5;
margin-bottom: 10px;
border-radius: 3px;
display: inline-block;
}
.logon{
width:341px;
height: 44px;
height: 44px;
background-color:#FF7DA0;
font-size:18px ;
color: #ffffff;
text-align: center;
borer:none;
}
.illustration{
font-size: 12px;
color: #999;
margin-top: 24px;
text-align: center;
}
.back{
background-image: url("/pc/ui/img/icon-close.ac2a7110.png");    background-repeat: no-repeat;
background-size: 44px;
cursor: pointer;
width:44px;
height: 44px;
position: absolute;
top:0px;
right: 0px;
}
.catchTime{
font-size: 14px;
height: 50px;
line-height: 50px;
text-align: center;
width:106px;
float: right;
color: #ea3667;
border-left: 1px solid #e5e5e5;
display: inline-block;
}
jquery怎么进行验证
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。