js写一个登录注册 要运用到正则表达式
时间: 2023-08-12 22:05:05 浏览: 63
好的,下面是一个简单的登录注册页面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login/Register</title>
<script type="text/javascript">
// 定义正则表达式
var emailRegex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$/;
var passwordRegex = /^[a-zA-Z0-9_]{6,20}$/;
// 登录函数
function login() {
// 获取输入框的值
var email = document.getElementById("login_email").value;
var password = document.getElementById("login_password").value;
// 判断输入是否合法
if (!emailRegex.test(email)) {
alert("请输入正确的邮箱地址!");
return;
}
if (!passwordRegex.test(password)) {
alert("密码长度应为6-20位,仅包含字母、数字和下划线!");
return;
}
// TODO:向服务器发送登录请求
}
// 注册函数
function register() {
// 获取输入框的值
var email = document.getElementById("register_email").value;
var password = document.getElementById("register_password").value;
var confirm_password = document.getElementById("confirm_password").value;
// 判断输入是否合法
if (!emailRegex.test(email)) {
alert("请输入正确的邮箱地址!");
return;
}
if (!passwordRegex.test(password)) {
alert("密码长度应为6-20位,仅包含字母、数字和下划线!");
return;
}
if (password !== confirm_password) {
alert("两次输入的密码不一致,请重新输入!");
return;
}
// TODO:向服务器发送注册请求
}
</script>
</head>
<body>
<h1>Login</h1>
<form>
<label>Email:</label>
<input type="text" id="login_email"><br>
<label>Password:</label>
<input type="password" id="login_password"><br>
<input type="button" value="Login" onclick="login()">
</form>
<h1>Register</h1>
<form>
<label>Email:</label>
<input type="text" id="register_email"><br>
<label>Password:</label>
<input type="password" id="register_password"><br>
<label>Confirm Password:</label>
<input type="password" id="confirm_password"><br>
<input type="button" value="Register" onclick="register()">
</form>
</body>
</html>
```
在上面的代码中,我们定义了两个正则表达式 `emailRegex` 和 `passwordRegex`,分别用于检验邮箱地址和密码的合法性。在登录和注册函数中,我们通过调用 `test()` 方法来判断输入框中的值是否符合正则表达式的规则,如果不符合,则弹出提示框提示用户重新输入。
需要注意的是,这只是一个简单的示例,实际开发中还需要考虑很多其他因素,比如防止 XSS 攻击、CSRF 攻击等等。而且,前端的验证只是起到了一个辅助的作用,最终的验证还是需要在后端进行。