如何用JS设置登陆页面

大家好 上一期我写到了登陆页面的结构和样式 但是JS还没有实现 现在给大家看下我是怎么实现登录页面的
 

这里面有很多的判断 如果你输入的账号不符合的话就会显示我自己做的一个弹窗

密码错的话就会显示密码错误

等等 这些都是很基础的判断 都是为了优化用户的体验而需要考虑到的

如果登录成功了 则会有跳出的弹窗显示登录成功！

这些在我下面的代码都有说明 而且都有详细的备注 大家可以参考下！

//给登录按钮绑定点击事件
function Enter_but() {
	// console.log(123);
	// let tel_value = $(".tel_value").attr("value","number");
	let mPattern = /^1[34578]\d{9}$/;
	if (parseInt($(".tel_value").val()) != '' && parseInt($(".password_value").val()) != '' && parseInt($(".tel_value")
			.val()) > 0 && parseInt($(
			".password_value").val()) > 0 && $(".tel_value").val() == parseInt($(".tel_value").val()) && $(
			".password_value").val() == parseInt($(".password_value").val())) {
		console.log(1);
		// alert(mPattern.test($(".tel_value").val()))
		if (mPattern.test($(".tel_value").val())) {
			if ($(".password_value").val().length >= 6) {
				let tel = $(".tel_value").val()
				let pass = $(".password_value").val()
				$.ajax({
					type: "POST",
					url: "https://c2c.kuxia.top/webapi/user/login",
					data: {
						tel: tel,
						pass: pass
					},
					success: function(res) {
						console.log(res);
						if (res.code == 1) {
							sessionStorage.setItem('info', JSON.stringify(res.info));
							pass_over();
							setTimeout(function(){
								location.href = 'shop_index.html';
							},1000)
							// return;
						} else {
							error_alert('账号或密码错误!')
						}
					}
				})
			} else {
				console.log('密码长度不够6位');
				error_alert('请输入正确密码!')
				// alert("密码长度不可以小于六");
			}
			//是否符合正则表达式

		} else {
			error_alert('请输入正确手机号!')
			// alert("手机号格式错误");
		}

	} else {
		error_alert('账号或密码错误')
	}

}

//绑定input框输入事件
let a = $('.tel_value');
let b = $('.password_value');
// console.log(a);
a.on('input', () => {
	$(".tel_value").css("border", "1.5px transparent solid");
	$(".text_num").css("opacity", "0");
})

b.on('input', () => {
	$(".password_value").css("border", "1.5px transparent solid");
	$(".text_pwd").css("opacity", "0");
})

//请求接口并判断是否请求成功



//封装函数调用弹窗错误
function error_alert(text) {
	$(".tel_value").val('');
	$(".password_value").val('');
	$(".tel_value").css("border", "1.5px solid red");
	$(".password_value").css("border", "1.5px solid red");
	$(".text_num").css("opacity", "100");
	$(".text_pwd").css("opacity", "100");
	// console.log($(".tel_value"));
	$(".error_alert").css("opacity", "1");
	$(".error_alert p")[0].innerHTML = text;
	// alert('账号或密码格式错误')
	setTimeout(function() {
		$(".error_alert").css("opacity", "0");
	}, 2000)
}

//请求接口成功后存储数据并且跳转到商城首页
function pass_over() {
	$(".success_alert").css("opacity", "1");
	setTimeout(function() {
		$(".success_alert").css("opacity", "0");
	}, 1000)
}

//点击注册按钮跳转到注册
function to_register() {
	location.href = 'register.html';
}