设计完成一个简单的用户注册页面,并使用 JavaScript 脚本对用户的各项输入进行有效性验 证。当出现错误时在输入项的右边标签内用红色加粗方式显示错误信息。
时间: 2023-05-25 17:02:02 浏览: 76
A:
以下是一个简单的用户注册页面的HTML代码:
```
<!DOCTYPE HTML>
<html>
<head>
<title>用户注册页面</title>
<meta charset="UTF-8">
<script type="text/javascript">
function validateForm(){
var username = document.forms["myForm"]["username"].value;
var email = document.forms["myForm"]["email"].value;
var password = document.forms["myForm"]["password"].value;
var confirm_password = document.forms["myForm"]["confirm_password"].value;
// 用户名不能为空
if (username == "") {
document.getElementById("username_error").innerHTML = "* 用户名不能为空";
return false;
}
// 邮箱格式验证
var email_regex = /\S+@\S+\.\S+/;
if (!email_regex.test(email)) {
document.getElementById("email_error").innerHTML = "* 请输入有效的电子邮箱地址";
return false;
}
// 密码不能为空并且长度必须在6至20之间
if (password == "") {
document.getElementById("password_error").innerHTML = "* 密码不能为空";
return false;
} else if (password.length < 6 || password.length > 20) {
document.getElementById("password_error").innerHTML = "* 密码长度必须在6至20之间";
return false;
}
// 确认密码必须与密码相同
if (confirm_password == "") {
document.getElementById("confirm_password_error").innerHTML = "* 请确认密码";
return false;
} else if (confirm_password != password) {
document.getElementById("confirm_password_error").innerHTML = "* 两次输入的密码不一致";
return false;
}
}
</script>
</head>
<body>
<h1>用户注册页面</h1>
<form name="myForm" onsubmit="return validateForm()" method="post">
<label for="username">用户名:</label><br>
<input type="text" id="username" name="username"><br>
<span id="username_error" style="color:red;font-weight:bold;"></span><br>
<label for="email">电子邮箱:</label><br>
<input type="email" id="email" name="email"><br>
<span id="email_error" style="color:red;font-weight:bold;"></span><br>
<label for="password">密码:</label><br>
<input type="password" id="password" name="password"><br>
<span id="password_error" style="color:red;font-weight:bold;"></span><br>
<label for="confirm_password">确认密码:</label><br>
<input type="password" id="confirm_password" name="confirm_password"><br>
<span id="confirm_password_error" style="color:red;font-weight:bold;"></span><br>
<input type="submit" value="提交">
</form>
</body>
</html>
```
上述HTML代码中,使用了JavaScript函数`validateForm()`对用户输入的各项数据进行验证。当用户输入不符合规则时,通过修改相应标签的`innerHTML`属性,在标签右边用红色加粗字体显示错误信息。
其中,验证逻辑如下:
- 用户名不能为空
- 邮箱格式验证
- 密码不能为空并且长度必须在6至20之间
- 确认密码必须与密码相同
当任意一项验证不通过时,即可停止提交表单,防止非法数据被提交到后台。