<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
span {
color: orange;
display: none;
}
</style>
<body>
<b> 表单, 验证用户名, 密码, 手机号用户名只包含数字,字母,下划线, 且长度不小于6位 密码长度在8到16位手机号要合法 </b>
<form>
<input id="username" type="text" /><br/>
<span id="usernameA">亲，用户名格式错啦~只能为字母数字下划线</span><br/>
<input id="password" type="password" /><br/>
<span id="passwordA">亲，密码格式错啦~</span><br/>
<input id="mobile" type="number" /><br/>
<span id="mobileA">亲，手机号码格式错啦~</span><br/>
<button οnclick="submit()" id="btn" disabled="disabled">提交</button>
</form>
<script>
function submit() {
var usname = document.querySelector("#username").value;
var p1 = /^\w{6,}$/;
if(p1.test(usname)) {
console.log("用户名正确");
document.querySelector("#usernameA").style.display = "none";
} else {
console.log("亲，用户名格式错啦~");
document.querySelector("#usernameA").style.display = "block";
}
var password = document.querySelector("#password").value;
var p2 = /.{8,16}$/;
if(p2.test(password)) {
console.log("密码可用");
document.querySelector("#passwordA").style.display = "none";
} else {
console.log("密码不可用");
document.querySelector("#passwordA").style.display = "block";
}
var p3 = /^1[3|4|5|8][0-9]{9}$/;
var mobile = document.querySelector("#mobile").value;
if(p3.test(mobile)) {
console.log("手机号码正确");
document.querySelector("#mobileA").style.display = "none";
} else {
console.log("手机号码错误");
document.querySelector("#mobileA").style.display = "block";
}
}
document.querySelector("#mobile").onblur = function() {
document.getElementById("btn").disabled = "";
submit()
} //在第三个失去焦点的时候，给submit()
</script>
</body>
</html>版权声明：本文为Endeavor_No1原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。