原生js实现用户登陆验证

最新推荐文章于 2023-07-04 10:22:38 发布

原创

最新推荐文章于 2023-07-04 10:22:38 发布 · 2.9k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

本文介绍了如何使用原生JavaScript进行用户登录验证，避免使用form表单导致无法利用正则表达式判断输入数据的正确性。通过添加name属性，获取输入值，并结合正则判断，点击按钮时触发验证函数。当输入正确时，利用window.location.href进行页面跳转。

目的：我们要想实现利用正则实现用户登陆验证，正确则跳转到个人主页，错误则提示输入错误
在这里插入图片描述
我们会想到用form表单来实现页面的跳转，但使用form表单就无法利用正则来判断输入的数据的正错，无论输入对错，都会跳转到action的页面
所以我们选择利用原生js来实现我们想要的效果

首先我们需要获取输入框的值：
我们还是用到了from表单👵
先给form加个name属性，再给input加个name属性

<form name="form">
				<input type="text" maxlength="11" name="input1">
</form>

然后用js获取输入的值

var x=document.forms["form"]["input1"].value;

然后利用正则判断输入的数据是否正确，通过onclick来触发函数。

var input1=document.getElementById("input1");
var Pattern1=/^1[3|4|5|7|8]\d{9}$/;
input2.onclick=function(){
		jiansuo();
}
function jiansuo(){
	var x=document.forms["form"]["input1"].value;
	if(Pattern1.test(x)){
		alert("您将进入个人 主页")
		window.location.href = "https://www.smartisan.com/";
	}else{
		alert("请输入正确账号")		
	}
}

在js里我们常常使用wind