制作一个.html文件Html代码要求: 1、 做出以上界面,要求用表格布局, 2、 密码框和确认密码框要求用密码显示形式 JavaScript实现表单验证要求: 1、 提交表单时要求验证用户名、密码、确认密码不能为空,如果为空则弹出对话框提示不能为空。 2、 另外,还需验证密码和确认密码一致,如果不一致则弹出对话框提示不一致 Css要求: 1、 要求用css代码实现整个表格在页面居中对齐。 2、 要求用css代码实现整个页面的背景颜色为蓝色。
时间: 2024-02-07 07:02:05 浏览: 107
好的,以下是制作一个.html文件的代码,包括Html代码、JavaScript实现表单验证以及Css样式:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<style>
body {
background-color: blue;
}
table {
margin: 0 auto;
}
</style>
</head>
<body>
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="confirm"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交" onclick="checkForm()"></td>
</tr>
</table>
<script>
function checkForm() {
var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;
var confirm = document.getElementsByName("confirm")[0].value;
if (username == "") {
alert("用户名不能为空!");
return false;
}
if (password == "") {
alert("密码不能为空!");
return false;
}
if (confirm == "") {
alert("确认密码不能为空!");
return false;
}
if (password != confirm) {
alert("密码和确认密码不一致!");
return false;
}
alert("表单验证通过!");
return true;
}
</script>
</body>
</html>
```
这份代码实现了要求的所有功能。其中,Html代码使用了表格布局,并且密码框和确认密码框使用了密码显示形式;JavaScript实现了表单验证,包括验证用户名、密码、确认密码不能为空,以及验证密码和确认密码一致;Css样式实现了整个表格在页面居中对齐,并且整个页面的背景颜色为蓝色。
阅读全文