原生js实现用户登陆验证

bowlingQ

于 2019-12-20 11:14:12 发布

阅读量2.8k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： javascript html css

本文链接：https://blog.youkuaiyun.com/weixin_45834446/article/details/103628465

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的：我们要想实现利用正则实现用户登陆验证，正确则跳转到个人主页，错误则提示输入错误
在这里插入图片描述
我们会想到用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"]["in

最低0.47元/天解锁文章