使用Vue进行登录和校验的操作

最新推荐文章于 2024-05-07 09:20:21 发布

有时间指导毕业设计

最新推荐文章于 2024-05-07 09:20:21 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/houzhicongone/article/details/119849940

版权

Vue登录

引入Vue.js
可以使用v-model进行双向绑定
@keyup="checkInfo"进行input输入的校验
@clik=“doSubmit” 进行提交后的校验
要校验的数据username和password，和tips,colorStyle放入到Vue的data{},数据中

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>登录</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />

</head>

	<body>

	
		<div class="login-banner" id="app" >
		<!-- 和Vue的data数据相关的绑定和校验-->
					
						<form>
							<div class="user-name"  style="margin-top: 20px;">
								<label for="user"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></label>
								<!-- @keyup进行绑定 -->
								<input type="text" name="username" v-model="username" id="userName" @keyup="checkInfo" placeholder="邮箱/手机/用户名">
							</div>
							<div class="user-pass"  style="margin-top: 20px;">
								<label for="password"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label>
								<input type="password" name="" v-model="password" id="userPwd" placeholder="请输入密码"@keyup="checkInfo">
							</div>
						</form>


						<!--  -->
					
		</div>

<script src="static/js/jquery-1.7.2.min.js"></script>

<!-- 自定义的Cookie取值 -->

<script src="static/js/cookie_utils.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 异步请求ajax -->
<script src="static/js/axios.min.js"></script>



<!-- 使用Juquery进行相关的校验 -->
<!-- <script type="text/javascript">

 $("#submitBtn").click(function(){
// 	// debugger;
// 	var name=$("#userName").val();
// 	var pwd=$('#userPwd').val();
// if(name.length<5 || name.length>16){

// 	$("#tips").html("<label style='color:red'> 账号长度必须为8-20 </label>")

	

// }else{
	
	
// 	if(pwd.length<5 || pwd.length>16){


// 	$("#tips").html("<label style='color:red'> 密码长度必须为5-16 </label>")


// }

//   $.get("http://localhost:8080/user/login",{
// 	  username:name,
// 	  password:pwd,
// 	},function(res){
// 		console.log(res);
// 		if(res.code==1000){
// 	// 获取前端传过来的数据 data
// 			var userInfo=res.data;
// 			// cookie和localstorage可以进行前端的页面之间的传值
// 			// setCookieValue("username",userInfo.username);
// 			// setCookieValue("userImg",userInfo.userImg);
// 	// localStorage传值
// 	localStorage.setItem("user",JSON.stringify(userInfo));


// 			window.location.href="index.html";
// 		}else{

// 			$("#tips").html("<label style='color:red'>"+ res.msg +"</label>");




// 		}



//   },"json"
 
  
  
  
//   )





// }







// })

</script> -->

<script type="text/javascript">
 var baseUrl="http://localhost:8080/";
var vm=new Vue({
	el:'#app',
	data:{
		username:"",
		password:"",	
		tips:" ",
		colorStyle:"",
		isRight:false,
	


	},
	methods:{
		doSubmit:function() {
			// 校验成功

			if(vm.isRight){
				var url=baseUrl+"/user/login";
				axios.get(url,{	
					params:{
						username:vm.username,password:vm.password

					} }
				
					).then((res)=>{

				console.log(res);

					var vo=res.data;
					if(vo.code==1){
						window.location.href="index.html";
					}else{
						vm.tips="账号或者密码错误";
					}



				});

			}else{
				vm.tips="请输入正确的用户名和密码";
				vm.colorStyle="color:red"
			}

            //  1.进行数据的校验

            if(vm.username==" "){
                vm.tips="请输入用户名";
                vm.colorStyle="color:red";


            }
             
         },
         checkInfo:function(){
            if(vm.username==""){
                vm.tips="请输入用户名";
                this.colorStyle="color:red";
				vm.isRight=false;


            }else if(vm.username.length<6 ||vm.username.length>20){
                vm.tips="账号长度必须为6-20";
                vm.colorStyle="color:red";
				vm.isRight=false;





            }else{
// 校验密码
				if(vm.password==" "){
                vm.tips="请输入密码";
                this.colorStyle="color:red";
				vm.isRight=false;


            }else if(vm.password.length<6 ||vm.password.length>16){
				vm.tips="密码长度为6-16";
                this.colorStyle="color:red";

			}else{
				vm.tips=" ";
				vm.isRight=true;
			}



			}





         }







	}




})




</script>


	</body>

</html>

有时间指导毕业设计

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用Vue进行登录和校验的操作

<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title>登录</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
复制链接

扫一扫