<button>登录</button> <button>注册</button>怎么添加验证正确性
时间: 2023-07-09 08:16:00 浏览: 30
要添加验证正确性,可以使用 JavaScript 来实现。以下是一个示例代码,可以在点击登录或注册按钮时进行验证:
```html
<button onclick="login()">登录</button>
<button onclick="register()">注册</button>
<script>
function login() {
// 获取用户名和密码输入框
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 验证用户名和密码是否正确
if (username === "正确的用户名" && password === "正确的密码") {
// 验证通过,可以进行登录操作
// ...
} else {
// 验证失败,提示错误信息
alert("用户名或密码不正确!");
}
}
function register() {
// 获取用户名、密码和确认密码输入框
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var confirm = document.getElementById("confirm").value;
// 验证用户名、密码和确认密码是否符合要求
if (username.length < 6 || password.length < 6 || password !== confirm) {
// 验证失败,提示错误信息
alert("用户名和密码长度必须大于等于6,确认密码必须与密码相同!");
} else {
// 验证通过,可以进行注册操作
// ...
}
}
</script>
```
需要根据具体的需求进行修改,例如需要添加更多的验证规则,或者需要将验证结果发送给后端进行处理等等。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
<form action="index.html" method="post" id="register-form" onsubmit="return submitlogin()">
账号登录
<input type="email" name="email" id="email" placeholder="邮箱">
<input type="password" name="password" id="password" placeholder="密码"> <button type="submit" id="login-button">登录</button>
没有账号?去注册 </form><script> function submitlogin(){ var pwd = document.getElementById("password").value; var email = document.getElementById("email").value; var reg = /^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$/; if (email == "") { alert("邮箱不能为空!"); } else if (!reg.test(email)) { alert("邮箱格式不正确!"); } else if (pwd == "") { alert("密码不能为空!"); } else if(pwd.length<6||pwd.length>20){ alert("密码长度不能低于6位,或者高于20位"); } else { return true; } } </script>改进代码前端验证成功才能进入index.html网页
![](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)