设计并实现一个注册页面,当提交表单时能利用JavaScript对输入信息进行校验的代码
时间: 2024-04-29 07:20:45 浏览: 14
好的,以下是一个简单的注册页面样例以及利用JavaScript对输入信息进行校验的代码:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<script src="validate.js"></script>
</head>
<body>
<form id="registration-form" onsubmit="return validateForm()">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="email">邮箱地址:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" name="confirm-password"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
```
JavaScript代码(validate.js):
```
function validateForm() {
// 获取输入框中的值
var username = document.getElementById("username").value.trim();
var email = document.getElementById("email").value.trim();
var password = document.getElementById("password").value.trim();
var confirmPassword = document.getElementById("confirm-password").value.trim();
// 定义正则表达式
var usernameRegex = /^[a-zA-Z0-9_-]{4,16}$/;
var emailRegex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
var passwordRegex = /^[a-zA-Z0-9_-]{8,16}$/;
// 判断用户名是否符合规则
if (!usernameRegex.test(username)) {
alert("用户名不符合规则(必须为4-16位字母、数字、下划线或中划线)");
return false;
}
// 判断邮箱地址是否符合规则
if (!emailRegex.test(email)) {
alert("邮箱地址不符合规则");
return false;
}
// 判断密码是否符合规则
if (!passwordRegex.test(password)) {
alert("密码不符合规则(必须为8-16位字母、数字、下划线或中划线)");
return false;
}
// 判断两次输入的密码是否相同
if (password !== confirmPassword) {
alert("两次输入的密码不一致");
return false;
}
// 校验通过,提交表单
return true;
}
```
这段代码会对输入框中的用户名、邮箱地址、密码进行校验,如果不符合规则会弹出提示框,防止用户输错信息。当用户输入信息合法后,点击提交按钮,表单会被提交。