用js写一个验证登录的页面

好的，以下是一个简单的验证登录的页面的代码示例： HTML部分： ```html <!DOCTYPE html> <html> <head> <title>Login</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Login</h1> <form id="login-form"> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <button type="submit">Login</button> </form> <script src="script.js"></script> </body> </html> ``` CSS部分： ```css body { background-color: #f2f2f2; } h1 { text-align: center; margin-top: 50px; } form { background-color: #fff; max-width: 500px; margin: 50px auto; padding: 20px; box-shadow: 0px 0px 5px rgba(0,0,0,0.3); } label { display: block; margin-bottom: 5px; } input { display: block; width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 5px; border: 1px solid #ccc; font-size: 16px; } button { display: block; width: 100%; padding: 10px; margin-top: 10px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; } button:hover { background-color: #0062cc; } ``` JS部分： ```js const form = document.getElementById('login-form'); const usernameInput = document.getElementById('username'); const passwordInput = document.getElementById('password'); form.addEventListener('submit', function(event) { event.preventDefault(); const usernameValue = usernameInput.value.trim(); const passwordValue = passwordInput.value.trim(); if (usernameValue === '') { alert('Please enter your username'); return; } if (passwordValue === '') { alert('Please enter your password'); return; } if (usernameValue === 'myusername' && passwordValue === 'mypassword') { alert('Login successful!'); // redirect to home page or do something else here } else { alert('Invalid username or password'); } }); ``` 这个页面会在用户点击登录按钮时，通过JS脚本对输入的用户名和密码进行验证，如果验证成功则弹出登录成功的提示框，否则弹出登录失败的提示框。

用js写一个验证登录的页面

相关推荐

用AJAX实现页面登陆以及注册用户名验证的简单实例

js表单登陆验证示例

jQuery仿京东会员注册页面表单验证代码.zip

用js写一个登陆页面

用js写一个售楼的登陆注册页面

用vue写一个前端登陆页面

用html和js写登陆页面如何验证密码

用html,css,js写一个登陆页面

用vue写一个登陆页面

用Vue写一个登陆页面

用vue代码写一个前端登陆页面

使用原生js写一个登陆页面

使用javascript写一个登陆页面login.html

用js写一个校园网自动登陆程序

hbuilder写一个登陆页面

用html + css +js 写一个非常漂亮的 登陆页面

写一个html+css+javascript的登陆页面

使用vue写一个登陆页面

帮我写一个uniapp的登陆页面

js实现一个登陆页面

最新推荐

JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

电影票房.csv

ASP.NET技术在网站开发设计中的研究与开发(论文+源代码+开题报告)【ASP】.zip

zigbee-cluster-library-specification

管理建模和仿真的文件

MATLAB结构体与对象编程：构建面向对象的应用程序，提升代码可维护性和可扩展性

详细描述一下STM32F103C8T6怎么与DHT11连接

JSBSim Reference Manual

"互动学习：行动中的多样性与论文攻读经历"

MATLAB结构体与数据库交互：无缝连接数据存储与处理，实现数据管理自动化

用html + css +js 写一个非常漂亮的登陆页面