html部分:
<div class="container">
<form action="
" class="form" id="form">
<h1>注册</h1>
<div class="form-control">
<label for="username">用户名</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<small>错误提示</small>
</div>
<div class="form-control">
<label for="email">邮箱</label>
<input type="text" id="email" name="email" placeholder="请输入邮箱">
<small>错误提示</small>
</div>
<div class="form-control">
<label for="password">密码</label>
<input type="text" id="password" name="password" placeholder="请输入密码">
<small>错误提示</small>
</div>
<div class="form-control">
<label for="password2">确认密码</label>
<input type="password" id="password2" name="password2" placeholder="请输入确认密码">
<small>错误提示</small>
</div>
<button>提交</button>
</form>
</div>图片展示:
注意一下:要写对哦.
ｃｓｓ部分：
:root
{
--success-color:#2ecc71;
--error-color:#e74c3c;
}
*{padding: 0px;margin: 0px;}
body
{
background-color: #f9fafb;
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container
{
background-color: #fff;
border-radius: 5px;
box-shadow: 0 20px 10px rgba(0,0,0,0.3);
width: 400px;
}
h1
{
text-align: center;
margin: 0 0 20px;
}
.form
{
padding: 30px 40px;
}
.form-control
{
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
color: #777;
display: block;
margin-bottom: 5px;
}
.form-control input {
width: 100%;
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-size: 14px;
padding: 10px;
}
.form-control input:focus {
border-color: #777;
outline: 0;
}
.form-control.success input {
border-color: var(--success-color);
}
.form-control.error input {
border-color: var(--error-color);
}
.form-control small {
color: var(--error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
.form button {
cursor: pointer;
background-color: #3498db;
border: 2px solid #3498db;
border-radius: 4px;
color: #fff;
display: block;
font-size: 16px;
padding: 10px;
margin-top: 20px;
width: 100%;
}图片展示：
注意一下：
ｃｓｓ变量：格式：
他是一个选择器．
定义变量：
--success-color:#2ecc71;使用变量：
border-color: var(--success-color);ｊｓ逻辑：
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");
//第一:先看看是否是按下了button,如果是就先去取消默认的事件,然后再
form.addEventListener("submit",function(e)
{
e.preventDefault();
//第二:再看看提交之前填写了吗?
checkRequired([username,email,password,password2]);
checkLength(username,3,15);
checkLength(password,6,12);
checkEmail(email);
checkPasswordsMatch(password, password2);
});
function checkRequired(inputArr)
{
inputArr.forEach(function(input)//遍历这些表单看看哪一个没写
{
if(input.value.trim()==="")//去除了空格,如果没值的话就
{
showError(input,`${getKeyWords(input)}为必填项`);
}
else
{
showSuccess(input);
}
});
}
function getKeyWords(input)
{
return input.placeholder.slice(3);
}
function showError(input,message)
{
const formControl=input.parentElement;
formControl.className="form-control error";
const small=formControl.querySelector("small");
small.innerText=message;
}
function showSuccess(input)
{
const formControl=input.parentElement;
formControl.className="form-control success";
}
function checkLength(input,min,max)
{
if(input.value.length<min)
{
showError(input,`${getKeyWords(input)}至少${min}个字符`);
}
else if(input.value.length>max)
{
showError(input,`${getKeyWords(input)}少于${max}个字符`);
}
else
{
showSuccess(input);
}
}
function checkEmail(input)
{
const re = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;//匹配规则
if(re.test(input.value.trim()))
{
showSuccess(input);
}
else
{
showError(input,"邮箱格式错误");
}
}
function checkPasswordsMatch(input1,input2)
{
if(input1.value!==input2.value)
{
showError(input2, "密码不匹配");
}
}图片展示：
第一步：先获取东西．
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",function(e)
{
e.preventDefault();
checkRequired([username,email,password,password2]);
checkLength(username,3,15);
checkLength(password,6,12);
checkEmail(email);
checkPasswordsMatch(password, password2);
});注意一下；第一：取消系统默认的事件，
最重要的一点在于是否每一个都填了．
所以：
function checkRequired(inputArr)
{
inputArr.forEach(function(input)
{
if(input.value.trim()==="")
{
showError(input,`${getKeyWords(input)}为必填项`);
}
else
{
showSuccess(input);
}
});
}注意一下；这个函数的功能是；看看是否每一个ｉｎｐｕｔ都填啦。
function getKeyWords(input)
{
return input.placeholder.slice(3);
}这个函数的功能是去掉请输入三个字．
function showError(input,message)
{
const formControl=input.parentElement;
formControl.className="form-control error";
const small=formControl.querySelector("small");
small.innerText=message;
}这个函数的功能是；错误啦就显示红色边框与字．
例如：
function showSuccess(input)
{
const formControl=input.parentElement;
formControl.className="form-control success";
}这个函数的功能是对啦就显示对的蓝色边框就行了．
例如：
function checkLength(input,min,max)
{
if(input.value.length<min)
{
showError(input,`${getKeyWords(input)}至少${min}个字符`);
}
else if(input.value.length>max)
{
showError(input,`${getKeyWords(input)}少于${max}个字符`);
}
else
{
showSuccess(input);
}
}这个函数的功能是；用来看看用户名和密码缺少多少字符．或者说多了．按照下面的标准．
function checkEmail(input)
{
const re = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;//匹配规则
if(re.test(input.value.trim()))
{
showSuccess(input);
}
else
{
showError(input,"邮箱格式错误");
}
}这个函数的功能是看看邮箱的格式对或者不对，
function checkPasswordsMatch(input1,input2)
{
if(input1.value!==input2.value)
{
showError(input2, "密码不匹配");
}
}这个函数的功能是；看看两次输入的密码是否都一样。
