我有一个服务器项目.这是一个html文件.如果我直接从磁盘打开文件，内置的客户端表单验证可以正常工作.但是如果我通过http传输文件，客户端的表单验证就不起作用了.以下是html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h2>Login</h2>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required maxlength="10" pattern="^\S+$">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required maxlength="10" pattern="^\S+$">
<br>
<button type="submit" onclick="submitLoginForm()">Login</button>
<button type="button" onclick="location.href='register.html'">Register</button>
<br>
<div id="error-message"></div>
</form>
<script>
async function submitLoginForm()
{
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
try
{
const response = await fetch('/api/login',
{
method: 'POST',
headers: { 'Content-Type': 'application/json', },
body: JSON.stringify({ username, password }),
});
if (response.status === 200)
{
window.location.href = '/dashboard';
}
else if (response.status === 401)
{
const errorMessage = document.getElementById('error-message');
errorMessage.textContent = 'Error: Invalid username or password';
}
else
{
const errorMessage = document.getElementById('error-message');
errorMessage.textContent = 'An error occurred';
}
}
catch (error)
{
console.error('Error during login:', error);
}
}
</script>
</body>
</html>
Http响应的头部如下:
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 2393
Cache-Control: no-cache, no-store, must-revalidate
Date: Mon, 18 Dec 2023 00:48:59 GMT
我已经在浏览器中判断了开发工具，以下是控制台中的错误和警告:
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'attribution-reporting'.
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'run-ad-auction'.
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'join-ad-interest-group'.
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'browsing-topics'.
An element doesn't have an autocomplete attribute
A form field has an id or name attribute that the browser's autofill recognizes. However, it doesn't have an autocomplete attribute assigned. This might prevent the browser from correctly autofilling the form.
To fix this issue, provide an autocomplete attribute.
1 resource
Violating node
Learn more: HTML attribute: autocomplete
谢谢你的帮助.:)