写一个html js用户注册页面源码 要有检验
时间: 2023-04-03 11:00:35 浏览: 91
以下是一个简单的 HTML 和 JavaScript 用户注册页面的源代码,包括基本的表单验证:
```html
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<script>
function validateForm() {
var username = document.forms["myForm"]["username"].value;
var password = document.forms["myForm"]["password"].value;
var confirmPassword = document.forms["myForm"]["confirmPassword"].value;
var email = document.forms["myForm"]["email"].value;
if (username == "") {
alert("请输入用户名");
return false;
}
if (password == "") {
alert("请输入密码");
return false;
}
if (confirmPassword == "") {
alert("请确认密码");
return false;
}
if (password != confirmPassword) {
alert("两次输入的密码不一致");
return false;
}
if (email == "") {
alert("请输入电子邮件地址");
return false;
}
if (!validateEmail(email)) {
alert("请输入有效的电子邮件地址");
return false;
}
return true;
}
function validateEmail(email) {
var re = /\S+@\S+\.\S+/;
return re.test(email);
}
</script>
</head>
<body>
<h1>用户注册</h1>
<form name="myForm" onsubmit="return validateForm()" 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>
<label for="confirmPassword">确认密码:</label>
<input type="password" id="confirmPassword" name="confirmPassword"><br>
<label for="email">电子邮件地址:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="注册">
</form>
</body>
</html>
```
这个页面包含一个表单,用户可以输入他们的用户名、密码、确认密码和电子邮件地址。当用户提交表单时,JavaScript 函数 `validateForm()` 将验证表单字段是否已填写,并检查密码和电子邮件地址是否有效。如果表单验证失败,函数将显示一个警告框并返回 `false`,防止表单提交。如果表单验证成功,函数将返回 `true`,允许表单提交。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)