js实现页面登录的验证功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		function check(){
			var name = document.getElementById("username");
			// var pwd = document.getElementById("password");
			var patt = /^\w{5,12}$/;
			if(patt.test(name.value)){
				alert("内容合法");
			}else{
				alert("内容不合法");
			}		
		}
	</script>
	<body>
		
		账号:<input name="uname" id="username"  />
		<!-- 密码:<input name="password" id="password"  /> -->
		<button onclick="check()">提交</button>
			
	</body>
</html>

我精心整理了计算机各个方向的从入门、进阶、实战的视频课程和电子书,都是技术学习路上必备的经验,跟着视频学习是进步最快的,而且所有课程都有源码,直接跟着去学!!!
web前端学习群:796165469

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现登录页面验证功能,可以使用以下步骤: 1. 创建一个 HTML 表单,包含用户名和密码两个输入框,以及一个提交按钮。 2. 在表单中添加 JavaScript 代码,用于验证用户输入的用户名和密码是否符合要求。例如,可以检查用户名和密码是否为空,或者密码是否符合一定的复杂度要求。 3. 在 JavaScript 中,可以使用 AJAX 技术将用户输入的用户名和密码发送到服务器端进行验证。如果验证通过,则可以将用户重定向到另一个页面,否则可以在登录页面上显示错误信息。 4. 为了保护用户的密码安全,建议在发送密码时使用 HTTPS 协议进行加密传输。 下面是一个简单的示例代码,只包含前端验证,后端验证需要使用相应的服务器端技术来实现: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Login Page</title> <script> function validateForm() { var username = document.forms["loginForm"]["username"].value; var password = document.forms["loginForm"]["password"].value; if (username == "" || password == "") { alert("Please enter both username and password."); return false; } if (password.length < 8) { alert("Password must be at least 8 characters long."); return false; } // AJAX code to send username and password to server for validation // ... return true; } </script> </head> <body> <h1>Login</h1> <form name="loginForm" onsubmit="return validateForm()" method="post"> <label>Username:</label> <input type="text" name="username"><br> <label>Password:</label> <input type="password" name="password"><br> <input type="submit" value="Login"> </form> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值