JS中密码用正则表达式校验
实时检测输入的密码手机否符合规范<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=de
·
实时检测输入的密码手机否符合规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0;}
#div1{
width: 200px;
height: 200px;
background-color: orange;
border: 1px sloid black;
padding: 50px;
margin: 150px auto;
text-align: center;
}
#div1 input{
width: 200px;
height: 30px;
font-size: 18px;
margin-bottom: 5px;
margin-top: 10px;
}
#div1 span{
font-size: 14px;
color: gray;
}
#div2 span{
display: block;
width: 50px;
height: 20px;
background-color: gainsboro;
color: black;
float: left;
margin-left: 15px;
}
#div2 {display: none;}
#div2 .active{
background-color: pink;
color: white;
}
</style>
</head>
<body>
<div id="div1">
<input type="text" placeholder="用户名" id="username">
<span id="usernameinfo">6-18个字符,可使用数字、字母、下划线,需以字母开头</span>
<input type="text" placeholder="密码" id="password">
<div id="div2">
<span class=".active">弱</span>
<span>中</span>
<span>强</span>
</div>
<span id="passwordinfo">6-18个字符,区分大小写</span>
</div>
<script>
window.onload = function() {
// 正则表单案例2
var oUserName = document.querySelector('#username')
var oUserName_span = document.querySelector('#usernameinfo')
var oPassWord = document.querySelector('#password')
var oPassWord_span = document.querySelector('#passwordinfo')
var aSpans = document.querySelectorAll('#div2 span')
var oDiv2 = document.querySelector('#div2')
// oUserName失去焦点事件
oUserName.onblur = () => {
var oValue = oUserName.value
if(oValue) {
// 1、判断长度
if(oValue.length > 18 || oValue.length < 6) {
oUserName_span.innerText = '长度应为6~18个字符'
oUserName_span.style.color = 'red'
}else if(!/[a-zA-Z]/.test(oValue[0])) { // 2、首字符不是字母
oUserName_span.innerText = '用户名必须是英文开头'
oUserName_span.style.color = 'red'
}else if(/\W/.test(oValue)) { // 3、用户名必须是数字、字母、下划线组成
oUserName_span.innerText = '用户名只能包括数字字母下划线'
oUserName_span.style.color = 'red'
}else{
oUserName_span.innerText = '用户名√'
oUserName_span.style.color = 'green'
}
}
}
// 密码组成:纯数字、纯大小写字母
// 密码强度:一种:弱; 两种组成:中; 三种混合:强
oPassWord.onkeyup = () => {
var oValue = oPassWord.value
// 密码长度校验
if(oValue.length >= 6){
oDiv2.style.display = 'block'
}else{
oDiv2.style.display = 'none'
}
// 清除清除上一次密码检验的结果
for(let i=0; i<aSpans.length; i++){
aSpans[i].className = ''
}
// 密码强度校验
if(/^\d+$/.test(oValue) || /^[a-z]+$/.test(oValue) || /^[A-Z]+$/.test(oValue)){
aSpans[0].className = 'active' // 弱
} else if(/\d+/.test(oValue) && /[a-z]+/.test(oValue) && /[A-Z]+/.test(oValue)) {
aSpans[2].className = 'active' //强
} else {
aSpans[1].className = 'active' // 中
}
}
}
</script>
</body>
</html>
更多推荐
已为社区贡献1条内容
所有评论(0)