vueの簡単な登録アカウント
3120 ワード
vueで1つの小さい登録機能を実現してしかも(前の文章の中で登録したコードを発表したことがある)登録することができて、ルートの方式を使わないで、localStorageを使います.setItem()とlocalStorage.getItem()は、ページジャンプのデータ転送を実現し、js部分のコードを貼ります.
前にネットでlocalStorageについてたくさん見ました.ここにいるよgetItemの応用ですが、私の困難な問題を解決していないので、先生との検討を経て急にわかった私は、この文章がみんなに役に立つことを望んでいます.
var login = new Vue({
el:'.tb_login',
data:{
username1:[], //
password1:[], //
username:'',
password:'',
index:0,
show:false,
show1:false,
show2:false,
phone:'', //input v-model ,
pass:'', //input v-model ,
pass1:'' //input v-model ,
},
methods:{
// ,
regis:function(){
window.location.href="register.html";
},
//
login:function(){
// username1 password1
var userName = JSON.parse(localStorage.getItem('this.username1'));
var passWord = JSON.parse(localStorage.getItem('this.password1'));
while(this.index!=userName.length-1 && username1.length!=0){
this.index++;
}
for(var i=0;i<=this.index;i++){
// ,
if(userName[i]==this.username&&passWord[i]==this.password){
window.location.href="TB.html";
//
break;
}else{
// i this.index ,
if(i!=this.index)
continue;
// ,
else{
//
this.show=true;
let self=this;
//
setTimeout(function(){
self.show=false;
},2000);
break;
}
}
}
},
//
verrif:function(){
var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
if(!reg.test(this.phone)){
// ,
this.show=true;
let self=this;
//
setTimeout(function(){
self.show=false;
},2000);
}else{
//
this.username1.push(this.phone);
// this.username1
localStorage.setItem('this.username1',JSON.stringify(this.username1));
window.location.href='password.html';
}
},
//
verrify:function(){
// 6 15
if(this.pass.length>=6&&this.pass.length<=15){
if(this.pass==this.pass1){
this.password1.push(this.pass);
// this.password1
localStorage.setItem('this.password1',JSON.stringify(this.password1));
this.show2=true;
let self=this;
//
setTimeout(function(){
window.location.href='login.html';
},2000);
}else{
//
this.show1=true;
let self=this;
//
setTimeout(function(){
self.show1=false;
},2000);
}
}else{
//
this.show=true;
let self=this;
//
setTimeout(function(){
self.show=false;
},2000);
}
}
}
});
前にネットでlocalStorageについてたくさん見ました.ここにいるよgetItemの応用ですが、私の困難な問題を解決していないので、先生との検討を経て急にわかった私は、この文章がみんなに役に立つことを望んでいます.