使用js实现账号密码校验 如果账号不合法则在旁边显示
时间: 2023-11-28 08:51:28 浏览: 68
可以使用正则表达式来检验账号和密码的合法性,具体实现如下:
HTML:
```html
<label for="account">账号:</label>
<input type="text" id="account" name="account"><br>
<div id="accountTip"></div>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<div id="passwordTip"></div>
<button onclick="submitForm()">提交</button>
```
JS:
```js
// 检验账号的正则表达式,这里以字母开头,只包含字母、数字和下划线,长度为6-16位为例
var accountRegex = /^[a-zA-Z]\w{5,15}$/;
// 检验密码的正则表达式,这里以包含大小写字母和数字,长度为6-16位为例
var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,16}$/;
// 获取账号和密码输入框以及提示信息的元素
var accountInput = document.getElementById('account');
var passwordInput = document.getElementById('password');
var accountTip = document.getElementById('accountTip');
var passwordTip = document.getElementById('passwordTip');
// 检验账号是否合法
function checkAccount() {
if (accountRegex.test(accountInput.value)) {
// 账号合法,清空提示信息
accountTip.innerHTML = '';
return true;
} else {
// 账号不合法,显示提示信息
accountTip.innerHTML = '账号不合法,请重新输入';
return false;
}
}
// 检验密码是否合法
function checkPassword() {
if (passwordRegex.test(passwordInput.value)) {
// 密码合法,清空提示信息
passwordTip.innerHTML = '';
return true;
} else {
// 密码不合法,显示提示信息
passwordTip.innerHTML = '密码不合法,请重新输入';
return false;
}
}
// 提交表单时检验账号和密码是否合法
function submitForm() {
if (checkAccount() && checkPassword()) {
// 账号和密码都合法,可以提交表单
alert('提交成功');
}
}
```
上面的代码中,通过正则表达式来检验账号和密码是否合法,如果不合法就在旁边显示相应的提示信息。在提交表单时,先检验账号和密码是否都合法,如果都合法则可以提交表单。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)