编写javascript代码实现用户登录时数据合法性校验功能
时间: 2023-06-05 18:48:07 浏览: 189
编写JavaScript代码实现用户登录时数据合法性校验功能,可以按照以下步骤进行:
1. 获取用户输入的用户名和密码。
2. 对用户名和密码进行非空校验,如果为空则提示用户输入。
3. 对用户名和密码进行长度校验,如果长度不符合要求则提示用户重新输入。
4. 对用户名和密码进行特殊字符校验,如果包含特殊字符则提示用户重新输入。
5. 如果用户名和密码均合法,则提交表单进行登录操作。
具体实现可以参考以下代码:
```
function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 非空校验
if (username == "" || password == "") {
alert("用户名和密码不能为空!");
return false;
}
// 长度校验
if (username.length < 6 || username.length > 20 || password.length < 6 || password.length > 20) {
alert("用户名和密码长度应在6-20个字符之间!");
return false;
}
// 特殊字符校验
var reg = /^[a-zA-Z-9_]+$/;
if (!reg.test(username) || !reg.test(password)) {
alert("用户名和密码只能包含字母、数字和下划线!");
return false;
}
// 提交表单
document.getElementById("loginForm").submit();
}
```
在HTML代码中,可以将该函数绑定到登录按钮的点击事件上,例如:
```
<form id="loginForm" action="login.php" method="post">
<label>用户名:</label>
<input type="text" id="username" name="username"><br>
<label>密码:</label>
<input type="password" id="password" name="password"><br>
<input type="button" value="登录" onclick="validate()">
</form>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)