function checklogin() { if(document.login.userName.value=='') {alert('请输入帐户'); document.login.userName.focus(); return false } if (document.login.password.value=='') {alert('请输入密码'); document.login.password.focus(); return false } }
时间: 2023-11-22 12:56:08 浏览: 47
这是一个 JavaScript 函数,用于在用户登录时检查用户名和密码是否为空。如果其中任何一个字段为空,则会显示一个警告框并将焦点放在相应的字段上。如果两个字段都有值,则该函数将返回 true。这个函数可以用在一个表单的提交事件中,例如:
```
<form name="login" onsubmit="return checklogin()">
<label>帐户名:</label>
<input type="text" name="userName"><br>
<label>密码:</label>
<input type="password" name="password"><br>
<input type="submit" value="登录">
</form>
```
这个表单中包含了两个输入框和一个提交按钮。当用户点击提交按钮时,表单的 onsubmit 事件会触发,此时 checklogin 函数会被调用。如果该函数返回 true,则表单会被提交到服务器进行处理。如果返回 false,则表单不会被提交,因为 JavaScript 会阻止表单的默认行为。
相关问题
4.编程序:实现简单的登录模块功能,即用户在登陆界面(如login.jsp)输入用户名和密码进行登录,数据处理页面判断用户信息是否正确,若正确则将用户转到功能主界面(用框架划分窗口),否则让用户返回登录界面并提示用户重新登录。
在编写这样的登录模块时,通常会涉及以下几个步骤:
1. **HTML前端**:
创建`login.jsp`页面,包含表单元素,如`<form>`标签,其中包含`<input type="text" id="username">`用于输入用户名,`<input type="password" id="password">`用于输入密码。提交按钮`<button type="submit">登录</button>`触发登录事件。
```html
<!-- login.jsp -->
<form action="checkLogin" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="登录">
</form>
```
2. **服务器端**:
在后端(例如Java、PHP等)设置一个处理表单提交的`checkLogin`方法,接收用户的用户名和密码,并检查它们是否匹配预设的数据库记录。
```java
// Java示例 (假设使用Spring MVC)
@Controller
public class LoginController {
@PostMapping("/checkLogin")
public String checkLogin(@RequestParam("username") String username, @RequestParam("password") String password) {
// 检查数据库
User user = userService.getUser(username);
if (user.getPassword().equals(password)) {
return "main"; // 登录成功,跳转至主界面
} else {
return "redirect:/login?message=用户名或密码错误"; // 返回登录页面并显示错误消息
}
}
}
```
这里假设有一个`UserService`负责从数据库获取用户信息。
3. **错误处理**:
在`checkLogin`方法返回失败时,需要将错误信息传递回前端,通常是通过URL查询字符串或模型属性`model.addAttribute()`的方式。
4. **响应**:
在前端,可以使用JavaScript监听登录请求的结果,如果状态码不是200(表示成功),就显示错误信息并阻止默认提交行为。
```javascript
// JavaScript 示例
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
var xhr = new XMLHttpRequest();
xhr.open('POST', '/checkLogin');
xhr.onload = function() {
if (xhr.status === 200) {
window.location.href = 'main'; // 成功跳转
} else {
alert(xhr.responseText); // 显示错误消息
}
};
xhr.send(new FormData(this));
});
```
使用prompt函数,console以及alert函数,写一个登录界面。 弹出输入框,输入用户名 弹出输入框,输入密码 验证用户名,密码是否正确,当用户名密码正确显示在页面中用户名 当用户名密码不正确弹出提示框
这是一个简单的HTML、JavaScript登录界面的例子,利用`prompt`函数获取用户输入,并用`console.log`和`alert`进行验证和反馈:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<label for="username">Username:</label>
<input type="text" id="username" oninput="checkLogin(this.value, passwordInput.value)">
<label for="password">Password:</label>
<input type="password" id="password" oninput="checkLogin(passwordInput.value, this.value)" style="display:none;" id="passwordInput">
<div id="loginStatus"></div>
<script>
function checkLogin(username, password) {
// 假设这里有一个预先定义的用户名和密码数组
const users = { "admin": "123456", "user1": "pass1" }; // 仅作示例
const enteredUsername = username.trim();
const enteredPassword = password.trim();
if (enteredUsername in users && enteredPassword === users[enteredUsername]) {
console.log(`Logged in as ${enteredUsername}`);
document.getElementById("loginStatus").innerText = `Welcome, ${enteredUsername}`;
} else {
alert("Invalid login credentials! Please try again.");
document.getElementById("loginStatus").innerText = "";
}
}
</script>
</body>
</html>
```
在这个例子中,我们有两个输入框,一个用于用户名和一个隐藏的用于密码。当你在任何一个输入框中键入,`checkLogin`函数会被触发。如果用户名和密码匹配,会在控制台打印一条消息并在页面上显示欢迎信息;如果不匹配,则会弹出提示框告知无效登录。