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

最新推荐文章于 2024-07-28 15:42:57 发布

ying227

最新推荐文章于 2024-07-28 15:42:57 发布

阅读量1.8k

点赞数

分类专栏： vue 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/ying227/article/details/125455901

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该示例展示了如何在Vue.js应用中结合Element-UI库，通过监听键盘事件（keyup）来实时检测登录和注册页面上的账号和密码输入是否符合长度要求。当输入不符合规定时，会显示错误提示。代码中定义了`checkinfo`方法检查账号和密码的长度，并更新提示信息和验证状态。

摘要由CSDN通过智能技术生成

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

引入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>

登录框

<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">

实现实时检测输入的账号和密码格式是否正确

<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>