<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="reg-form" action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td class="inputs">
<input name = "username" type="text" id="username">
<br>
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
</td>
</tr>
<tr>
<td>密码</td>
<td class="inputs">
<input name = "password" type="password" id="password">
<br>
<span id="password_err" class="err_msg" style="display: none">密码格式错误</span>
</td>
</tr>
<tr>
<td>手机号</td>
<td class="inputs">
<input name = "tele" type="text" id="tele">
<br>
<span id="tele_err" class="err_msg" style="display: none">请输入正确格式的手机号</span>
</td>
</tr>
<tr>
<td class="inputs">
<input name = "tele" type="submit" id="reg-form" value="提交">
<br>
<!-- <span id="tele_err" class="err_msg" style="display: none">请输入正确格式的手机号</span> -->
</td>
</tr>
</table>
</form>
<script>
/*
输入框验证
*/
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");
//1.2 绑定onblur事件，失去焦点
usernameInput.onblur= usernameflag;
//1.3 获取用户输入
function usernameflag(){
//去除空格
var username = usernameInput.value.trim();
//1.4判断是否合规
var flag = username.length >= 6 && username.length<=12 ;
if(flag){
document.getElementById("username_err").style.display = "none";
}
else{
document.getElementById("username_err").style.display = "";
}
return flag;
}
//1.验证密码是否合规
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");
//1.2 绑定onblur事件，失去焦点
passwordInput.onblur = passwordflag;
//1.3 获取用户输入
function passwordflag(){
//先去除所有空格
var password = passwordInput.value.trim();
//1.4 判断是否合规
var flag = password.length>=6&&password.length<=12
if(flag){
document.getElementById("password_err").style.display = "none";
}
else{
document.getElementById("password_err").style.display = "";
}
return flag;
}
//1.验证密码是否合规
//1.1 获取密码的输入框
var teleInput = document.getElementById("tele");
//1.2 绑定onblur事件，失去焦点
teleInput.onblur = teleflag;
//1.3 获取用户输入
//先去除所有空格
function teleflag(){
var tele = teleInput.value.trim();
var flag = tele.length==11
//1.4 判断是否合规
if(flag){
document.getElementById("tele_err").style.display = "none";
}
else{
document.getElementById("tele_err").style.display = "";
}
return flag;
}
/*
表单验证
*/
//1、获取表单
var regForm = document.getElementById("reg-form");
//2、绑定onsumit事件
regForm.onsubmit = function(){
//判断每个表单项是否符合要求
var flag = passwordflag() && usernameflag() && teleflag();
return flag;
}
</script>
<style>
span{
color:red;
}
</style>
</body>
</html>