用HTML和js做一个注册页面 包含用户名 密码 邮箱 手机号 验证码并做基本验证
时间: 2024-04-29 16:24:00 浏览: 16
以下是一个简单的注册页面,包含了用户名、密码、邮箱、手机号和验证码,并且实现了基本验证:
```html
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<script type="text/javascript">
function validateForm() {
var username = document.forms["registerForm"]["username"].value;
var password = document.forms["registerForm"]["password"].value;
var email = document.forms["registerForm"]["email"].value;
var phone = document.forms["registerForm"]["phone"].value;
var captcha = document.forms["registerForm"]["captcha"].value;
// 验证用户名
if (username == "") {
alert("用户名不能为空!");
return false;
}
// 验证密码
if (password == "") {
alert("密码不能为空!");
return false;
}
// 验证邮箱格式
var emailRegex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if (!emailRegex.test(email)) {
alert("邮箱格式不正确!");
return false;
}
// 验证手机号格式
var phoneRegex = /^1[3456789]\d{9}$/;
if (!phoneRegex.test(phone)) {
alert("手机号格式不正确!");
return false;
}
// 验证验证码
if (captcha == "") {
alert("验证码不能为空!");
return false;
}
}
</script>
</head>
<body>
<h1>注册页面</h1>
<form name="registerForm" onsubmit="return validateForm()" method="post">
<label>用户名:</label>
<input type="text" name="username"><br>
<label>密码:</label>
<input type="password" name="password"><br>
<label>邮箱:</label>
<input type="text" name="email"><br>
<label>手机号:</label>
<input type="text" name="phone"><br>
<label>验证码:</label>
<input type="text" name="captcha"><br>
<input type="submit" value="注册">
</form>
</body>
</html>
```
在这个页面中,我们通过 `document.forms` 获取表单元素,然后对用户输入的内容进行验证。如果某个输入框为空或格式不正确,就弹出提示框并返回 `false`,阻止表单提交。如果所有输入框都通过了验证,就返回 `true`,表单可以提交。