利用正则表达来进行表单验证
步骤
根据用户输入的信息,对结果进行校验。
如果用户输入的长度有问题,提示用户:请输入6-12位字符。
如果用户输入的长度没问题,但是不是字母开头,提示用户:用户名必须以字母开头。
如果用户输入的有非字母、数字、下划线的,提示用户:用户名必须由字母数字下划线组成。
弱:纯数字,纯小写,纯大写
强:三者都有+下划线
中:两两混合。
【注意】.用户名校验最好是输入框失去焦点的时候
css案例:
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 250px;
height: 250px;
border: 1px solid;
padding: 50px;
text-align: center;
background-color: #1abc9c;
margin: 100px auto;
}
.box input{
width: 250px;
height: 30px;
font-size: 18px;
margin-top: 20px;
}
#message{
margin-top: 5px;
font-size: 20px;
color: #fff;
}
.strongLevel{
width: 70px;
height: 30px;
line-height: 30px;
background-color: #95a5a6;
color: #fff;
float: left;
margin-left: 12px;
margin-top: 10px;
}
</style>
html代码:
<div class="box">
<input type="text" id="userName" placeholder="请输入用户名">
<span id="message">6~12位字符,可使用字母、数字、下划线。需以字母开头。</span>
<input type="text" id="password" placeholder="请输入密码">
<div class="strongLevel active">弱</div>
<div class="strongLevel">中</div>
<div class="strongLevel">强</div>
</div>
js区域:
<script>
// 用户名输入框
let userName = document.getElementById("userName");
// 提示信息区域
let message = document.getElementById("message");
userName.onblur = function(){
// 1.获取用户输入的信息
let value = userName.value;
//2.判断用户名长度。
if (value.length<6||value.length>12) {
message.innerHTML = "请输入6-12位字符!";
message.style.color = "red";
} else if(!/^[a-zA-Z]/.test(value)){
// 3.判断用户名是否以字母开头
message.innerHTML = "用户名必须以字母开头!";
message.style.color = "red";
}else if(/\W/.test(value)){
// 4. 只能由字母数字下划线组成
message.innerHTML = "用户名必须由字母数字下划线组成!";
message.style.color = "red";
}else{
message.innerHTML = "该用户名可以注册!";
message.style.color = "green";
}
}
// 密码框的校验是在用户输入的时候。
var password = document.querySelector("#password");
var level = document.querySelectorAll(".strongLevel");
password.onkeyup = function(){
// 先把所有的其他颜色清除
for (var i = 0; i < level.length; i++) {
level[i].style.backgroundColor = "#95a5a6"
level[i].style.color = "#fff";
}
// 1。获取用户输入的内容
var psw = password.value;
// 2.弱:纯数字,纯小写,纯大写
if (/^\d+$/.test(psw)||/^[a-z]+$/.test(psw)||/^[A-Z]+$/.test(psw)) {
level[0].style.backgroundColor = "red";
} else if(/\d/.test(psw)&&/[a-z]+/.test(psw)&&/[A-Z]+/.test(psw)&&/_/.test(psw)){
level[2].style.backgroundColor = "green";
}else{
level[1].style.backgroundColor = "yellow";
level[1].style.color = "black";
}
}
</script>
效果图: