对于初学者来说,检测用户名和密码是否匹配还很难,也很难理解,现在用一种很简单的方式不用请求服务器的情况下检测,我的代码是写的淘宝登录页面(适用于移动端):
HTML部分:
<div class="taobao_icon"></div> <div class="tb_login"> <input type="text" class="count" placeholder="手机号/邮箱/会员名" v-model="username"/> <input type="password" class="count" placeholder="请输入密码" v-model="password"/> <div class="tb_el"> <span class="tb_el_tit">免费注册</span> <span class="tb_el_tit">忘记密码</span> </div> <div class="login_nav" @click="login()">登录</div> <div class="login_nav login_nav1">短信验证码登录</div> <div class="login_fal" v-show="show" v-cloak>用户名或密码出现错误,请重新输入</div>//v-cloak解决页面刷新时闪现已隐藏部分 </div> <script src="TB.js"></script> <script src="vue.js"></script>CSS部分
/*登录模块*/ .taobao_icon{ width:69px; height:69px; background:url(fl_images/taobao.gif) no-repeat; background-size:69px 69px; margin:38px auto; } .count{ display:block; width:87.5%; height:26px; border:none; margin:34px auto 16px; border-bottom:1px solid #ff5000; /*border-radius:5px;*/ outline:none; } /*修改提示文字的颜色*/ input::-webkit-input-placeholder { /* WebKit browsers */ color:#b5b5b5; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#b5b5b5; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#b5b5b5; } input:-ms-input-placeholder { /* Internet Explorer 10+ */ color:#b5b5b5; } .tb_el{ margin:0 auto; display:box; display: -webkit-box; display: -o-box; display: -moz-box; } .tb_el .tb_el_tit:first-child{ margin-right: 56.25%; margin-left: 6.9%; } .tb_el_tit{ display: block; color:#555; font-size:8px; box-flex: 1.0; -webkit-box-flex: 1.0; -moz-box-flex: 1.0; -o-box-flex: 1.0; } .login_nav{ background: -webkit-linear-gradient(left,#ff8e01,#ff5100); background: -o-linear-gradient(left,#ff8e01,#ff5100); background: -moz-linear-gradient(left,#ff8e01,#ff5100); background: -mos-linear-gradient(left,#ff8e01,#ff5100); background: linear-gradient(left,#ff8e01,#ff5100); width:87.5%; color:#fff; border-radius:20px; height:40px; line-height: 40px; font-size: 10px; text-align: center; margin:35px auto; } .login_nav1{ background:#fff; color:#ff5000; border:1px solid #ff5000; } /*解决隐藏部分闪现问题*/ [v-cloak]{ display : none; }
vue.js部分
var login = new Vue({ el:'.tb_login', data:{ username1:['111','222','333'], password1:['111','222','333'], //存储用户名和密码的数据,随意填写 username:'', password:'', index:0, //设置默认index值 show:false //隐藏提示框 }, methods:{ //点击登录按钮验证用户名和密码 login:function(){ while(this.index!=this.username1.length-1){ this.index++; } for(var i=0;i<=this.index;i++){ //登录成功时的条件,并在匹配成功后停止循环 if(this.username1[i]==this.username&&this.password1[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; },1000); break; } } } } } });