js逐步教实现表单系统(html逻辑 css逻辑 js逻辑)

html部分:

		

			"container">" class="form" id="form">
			
				注册
			

			

				"form-control">"username">用户名"text" id="username" name="username" placeholder="请输入用户名">错误提示
			

			

				"form-control">"email">邮箱"text" id="email" name="email" placeholder="请输入邮箱">错误提示
			

			

				"form-control">"password">密码"text" id="password" name="password" placeholder="请输入密码">错误提示
			

			

				"form-control">"password2">确认密码"password" id="password2" name="password2" placeholder="请输入确认密码">错误提示
			
提交
		

图片展示:

注意一下:要写对哦.

ｃｓｓ部分：

: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, "密码不匹配"); } } 

这个函数的功能是；看看两次输入的密码是否都一样。