用JavaScript实现一个登陆界面,要求用户名的长度大于6位,小于30位,否则提示错误,密码要求前3到9位是字母,后面3到9位是数字,否则提示错误
时间: 2023-12-02 19:06:24 浏览: 110
好的,以下是用 JavaScript 实现登陆界面的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
</head>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login" onclick="validate()">
</form>
<script>
function validate() {
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let usernameLength = username.length;
let passwordLength = password.length;
if (usernameLength < 6 || usernameLength > 30) {
alert("Error: Username length must be between 6 and 30 characters!");
return false;
}
if (!/^[a-zA-Z]{3,9}\d{3,9}$/.test(password)) {
alert("Error: Password must start with 3 to 9 letters and end with 3 to 9 digits!");
return false;
}
return true;
}
</script>
</body>
</html>
```
这里使用了 HTML 的表单元素,以及 JavaScript 来进行表单验证。validate() 函数用于验证表单输入是否符合要求,如果不符合则弹出提示框,并返回 false 表示表单验证不通过。如果表单验证通过,则返回 true,表单可以提交。在 validate() 函数中,首先获取了用户名和密码的值,然后分别判断其长度和格式是否符合要求。用户名的长度需要大于 6 位,小于 30 位;密码的前 3 到 9 位是字母,后 3 到 9 位是数字。这里使用了正则表达式来验证密码格式,如果不符合要求则返回 false,否则返回 true。
阅读全文