<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<link rel="stylesheet" href="form.css">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div class="container">
<div class="header"><h2>表单验证</h2></div>
<form class="form" id="form">
<div class="form_control" id="form_control">
<label for="">用户名</label>
<input type="text" placeholder="请输入用户名" id="username"/>
<i class="el-icon-success"></i>
<i class="el-icon-warning"></i>
<small>错误信息</small>
</div>
<div class="form_control" id="form_control">
<label for="">邮箱</label>
<input type="text" placeholder="请输入邮箱" id="email"/>
<i class="el-icon-success"></i>
<i class="el-icon-warning"></i>
<small>错误信息</small>
</div>
<div class="form_control" id="form_control">
<label for="">密码</label>
<input type="password" placeholder="请输入密码" id="password"/>
<i class="el-icon-success"></i>
<i class="el-icon-warning"></i>
<small>错误信息</small>
</div>
<div class="form_control" id="form_control">
<label for="">重复密码</label>
<input type="password" placeholder="请输入重复密码" id="password2"/>
<i class="el-icon-success"></i>
<i class="el-icon-warning"></i>
<small>错误信息</small>
</div>
<button type="submit">提交</button>
</form>
</div>
<script>
const form = document.getElementById("form");
const username= document.getElementById("username");
const email = document.getElementById("email");
const password = document.getElementById("password");
const password2 = document.getElementById("password2");
form.addEventListener('submit',(e)=>{
e.preventDefault();//防止页面提交
checkInputs();
})
function checkInputs(){
const usernameValue = username.value.trim();//trim()去除输入值的空格
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
//用户名验证
if(usernameValue===''){
setError(username,"用户名不能为空");
}else{
setSuccess(username);
}
//邮箱验证
if(emailValue===''){
setError(email,"邮箱不能为空");
}else if(!valiEmial(emailValue)){
setError(email,"邮箱格式不正确，请重新输入");
}else{
setSuccess(email);
}
//密码验证
if(passwordValue===''){
setError(password,"密码不能为空");
}else{
setSuccess(password);
}
//重复密码验证
if(password2Value===''){
setError(password2,"密码不能为空");
}else if(passwordValue!==password2Value){
setError(password2,"两次密码输入不一致，请重新输入")
}else{
setSuccess(password2);
}
}
function setError(element,msg){
const element_par = element.parentElement;
const message = element_par.querySelector('small');
message.textContent = msg;
//error是验证错误的样式，success是验证成功的样式
element_par.classList.remove('success');
element_par.classList.add('error');
}
function setSuccess(element){
const element_par = element.parentElement;
element_par.classList.remove('error');
element_par.classList.add('success');
//现在这块是错误得样式喝正确的样式混在一起，
//所以必须在验证将之前的样式去除掉
}
function valiEmial(email){
const regEmial = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
return regEmial.test(email);
}
</script>
</body>
</html>
