vue.js element-ui 实现简单的登录页面

在登录、注册页面,实时对账号、密码的长度进行检测的时候,输入框需要监听键盘事件

  1. 引入vue.js 、 element-ui.js、element-ui.css
<head>
	<meta charset="utf-8">
	<title>登录</title>
	<script type="text/javascript" src="static/js/vue.js"></script>
	<script type="text/javascript" src="static/elementui/index.js"></script>
	<script type="text/javascript" src="static/js/axios.min.js"></script>
	<link rel="stylesheet" href="static/css/login.css" />
	<link rel="stylesheet" href="static/elementui/index.css" />
	<link rel="stylesheet" href="static/css/bootstrap.min.css" />
</head>
  1. 登录框
<div class="form-box">
	<div class="login-title">
		<div class="title">账户登录</div>
	</div>
	<div class="tips">
		<h5 :style="colorstyle" id="tips">{{tips}}</h5>
	</div>
	<div class="div-top">
		<el-form  class="login-in">
			<el-form-item prop="username">
				<el-input type="text" prefix-icon="el-icon-user" v-model="username" placeholder="邮箱/用户名/登录手机" @keyup.up.native="checkinfo"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input type="password" prefix-icon="el-icon-thumb" v-model="password" placeholder="密码" @keyup.native="checkinfo"></el-input>
			</el-form-item>
			<div class="item">
				<div class="forget-pw-safe">
					<span> <a href="">忘记密码</a></span>
				</div>
				
			</div>
			<el-form-item>
				<el-button type="primary" class="login-button"  @click="doLogin">登录</el-button>				
			</el-form-item>
		</el-form>	
	</div>
	<div class="coagent">
		<div class="extra-r">
			<el-breadcrumb separator="">
			  <el-breadcrumb-item><a href="register.html" class="register-color">立即注册</a></el-breadcrumb-item>				
			</el-breadcrumb>	
		</div>
				
	</div>
 </div>

如果用input控件keyup事件监听方法如下

<input type="text" id="uname" v-model="username" @keyup="checkinfo">
  1. 实现实时检测输入的账号和密码格式是否正确
<script type="text/javascript">
		var baseUrl = "http://localhost:8080/"
		var vue = new Vue({
			el: "#app",
			data:{
				username: "",
				password: "",
				tips:"",
				colorstyle:"",
				isRight: false
			},
			methods: {
				doLogin:function() {
					if(!vue.isRight) {
						vue.tips = "请输入正确账号和密码!";
						vue.colorstyle="color:red";
					} else {
						var url = baseUrl + "user/login";
						axios.get(url,{
							params:{
								name:vue.username,
								pwd:vue.password
							}	
						}).then((res)=>{
							let ret = res.data;
							if(ret.code == 0) {
								window.location.href="home.html";
							} else {
								vue.tips="账号或密码错误!";
							}
						});
					}
				},
				checkinfo:function(){
					if(vue.username == "") {					
						vue.tips = "请输入账号!";
						vue.colorstyle="color:red";
						vue.isRight = false;
					} else if(vue.username.length<6 || vue.username.length>20){				
						vue.tips = "账号长度必须为6-20个字符!";
						vue.colorstyle="color:red";
						vue.isRight = false;
					} else {
						if(vue.password == "") {
							vue.isRight = false;
							vue.tips = "请输入密码!";
							vue.colorstyle="color:red";
						} else if(vue.password.length<6 || vue.password.length>16){		
							vue.isRight = false;
							vue.tips = "密码长度必须为6-16个字符!";
							vue.colorstyle="color:red";
						} else {
							vue.tips = "";
							vue.isRight = true;
						}
					}
				},
				
			},
			
		})
		
	</script>
  1. 实现效果
    vue.js element-ui 实现简单的登录页面_第1张图片
    vue.js element-ui 实现简单的登录页面_第2张图片

你可能感兴趣的:(vue,vue.js,elementui)