要求:密码输入完成后密码验证必须是6-10位,并且只能由数字字母下划线组成,如果不满足要求,用红色文字提示错误,反之则√
HTML部分:
<body>
<input type="text" placeholder="密码只能包含数字字母下划线,且为6-10位">
<span></span>
</body>
JavaScript部分:
我们首先要获取input里面的value值,在进行后续的操作,后续的操作也就是利用for循环判断即可。
<script src="../JavaScipt/jquery-3.7.1.js"></script>
<script>
$(function () {
$("input").blur(function () {
let value = $(this).val();
if (value.length < 6 || value.length > 10) {
$("span").text("密码长度应该为6-10位").css("color","red")
}
else {
flag = true;
for (let i = 0; i < value.length; i++) {
if(!(value[i] >= 0 && value[i <= 9] || value[i] >= 'a' && value[i] <= 'z' || value[i] >= 'A' && value[i] <= 'Z' || value[i] == '_'))
{
flag=false
$("span").text("密码只能由数字字母下划线组成").css("color","red")
}
else
{
$("span").text("√").css("color","green")
}
}
}
})
})
</script>
最后在设置span的样式即可
最后实现的效果大概是这个样子