2、密码由数字和大小写字母中至少二种组成,长度为6至10位,密码输入后以“*”号显示,输入完成后输入框失去焦点时,用正则表达式进行判断密码形式是否满足要求,输入有误时在输入框后面显示输入密码类型或长度错误。
时间: 2024-03-06 22:49:48 浏览: 58
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
你可以使用jQuery和正则表达式来验证密码是否符合要求。
HTML代码:
```html
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码">
<span class="error-message"></span>
```
jQuery代码:
```javascript
$(document).ready(function() {
// 密码长度为6至10位,由数字和大小写字母中至少二种组成
var passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{6,10}$/;
$('#password').on('blur', function() {
var password = $(this).val();
if (!passwordRegex.test(password)) {
$('.error-message').text('密码必须由数字和大小写字母中至少二种组成,长度为6至10位');
$(this).addClass('error');
} else {
$('.error-message').empty();
$(this).removeClass('error');
}
});
});
```
CSS代码:
```css
.error {
border: 1px solid red;
}
.error-message {
color: red;
}
```
在上述代码中,我们首先定义了一个正则表达式,用于验证密码是否符合要求。然后,我们使用jQuery的`on()`方法来监听密码输入框的`blur`事件。当密码输入框失去焦点时,我们将获取密码并使用正则表达式进行验证。如果密码不符合要求,我们将向错误消息元素添加文本,并向密码输入框添加错误类。如果密码符合要求,我们将清空错误消息元素并从密码输入框中删除错误类。注意,我们在CSS中定义了`error`类的样式和错误消息元素的样式。
当用户提交表单时,您可以检查密码输入框是否存在错误类。如果存在错误类,则密码不符合要求。否则,密码符合要求。
阅读全文