prefacio
Hola a todos, compartan una validación de formulario HTML+CSS+JS, incluido el diseño simple de la página, la representación de estilos y los métodos básicos de validación de JS. ¡Espero que te guste! Ja ja
1. Representación
2. Introducción
Biblioteca de iconos usando Element-UI
<!-- 引入样式 -->
<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>
El estilo CSS crea una referencia de archivo css por separado, o se puede escribir en la etiqueta de estilo de página HTML
Dirección: Componente | Elemento , también puede utilizar otras bibliotecas de componentes según sus preferencias.
3. Código
(1)HTML
Agregue el código en la etiqueta del cuerpo
<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>Error Message</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>Error Message</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>Error Message</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>Error Message</small>
</div>
<button type="submit">Submit</button>
</form>
</div>
(2) CSS
* {
box-sizing: border-box;
}
body {
background-color: #9659b6;
font-family: "Helvetica Neue", sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
width: 400px;
max-width: 100%;
}
.header {
background-color: #f7f7f7;
border-radius: 10px 10px 0 0;
border-bottom: 1px soild #f0f0f0;
padding: 20px 40px;
}
.header h2 {
margin: 0;
}
.form {
padding: 30px 40px;
}
.form_control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form_control label {
display: inline-block;
margin-bottom: 5px;
}
.form_control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-family: inherit;
font-size: 14px;
padding: 10px;
width: 100%;
}
.form_control input:focus {
outline: 0;
}
输入框验证的样式
.form_control.success input {
border-color: #2ecc71;
}
.form_control.error input {
border-color: #e74c3c;
}
/* 验证的图标的样式 */
.form_control.success i.el-icon-success {
visibility: visible;
color: #2ecc71;
}
.form_control.error i.el-icon-warning {
visibility: visible;
color: #e74c3c;
}
.form_control i {
position: absolute;
top: 40px;
right: 10px;
visibility: hidden;
}
.form_control small {
visibility: hidden;
position: absolute;
font-weight: 600;
bottom: 0;
left: 0;
}
/* 验证错误的提示信息样式 */
.form_control.error small {
visibility: visible;
color: #e74c3c;
}
.form button {
background-color: #8e44ad;
border: 2px solid #8e44ad;
border-radius: 5px;
color: #fff;
padding: 10px;
width: 100%;
font-size: 16px;
display: block;
transition: 0.3s;
}
.form button:hover {
background-color: #fff;
color: #8e44ad;
}
(3) JavaScript
<script>
//获取页面实体（输入框、表单）---------------------------------------
const form = document.getElementById("form");
const username = document.getElementById("username");
const email = document.getElementById("email");
const passowrd = document.getElementById("password");
const password2 = document.getElementById("password2");
//form表单提交事件-----------------------------------
form.addEventListener('submit', (e) => {
checkInputs();
e.preventDefault();//防止浏览器刷新页面提交表单
})
//总验证方法-------------------------------------------
function checkInputs() {
//获取输入框实体的输入值
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = passowrd.value.trim();
const password2Value = password2.value.trim();
//用户名验证
if (usernameValue==="") {
setErrorFor(username, "用户名不能为空");
} else {
setSuccessFor(username);
}
//邮箱验证
if(emailValue===""){
setErrorFor(email,"邮箱不能为空");
}else if(!valiEmail(emailValue)){
//valiEmail返回的false表示邮箱不正确，则对其取反为true，if执行
setErrorFor(email,"邮箱格式不正确，请重新输入");
}else{
setSuccessFor(email);
}
//密码验证
if(passwordValue===""){
setErrorFor(password,"密码不能为空");
}else{
setSuccessFor(passowrd)
}
//重复密码验证
if(password2Value===""){
setErrorFor(password2,"密码不能为空");
}else if(passwordValue!==password2Value){
setErrorFor(password2,"两次输入密码不一致，请再次输入")
}else{
setSuccessFor(password2)
}
}
//简单封装验证成功和失败的方法-------------------------------
//验证原理：输入框的父组件上添加成功或失败的样式，并且将验证错误信息动态添加到<small>标签中
//验证失败
function setErrorFor(input, message) {
//input即为组件名（在这里因只有输入框所以写成input），message是错误信息（在总验证方法中传回错误信息message）
const formControl = input.parentElement;//所验证实体（输入框）的父组件
const small = formControl.querySelector('small');
small.textContent = message;
//此处须注意细节，如果只添加错误样式，输入错误信息后再次输入正确的信息，两个样式相互重叠，造成偏差，
//所以之前应先去除已出现的样式，没明白的话，可以将添加success的代码注释掉，看看效果
formControl.classList.remove('success');
formControl.classList.add('error');
}
//验证成功
function setSuccessFor(input) {
const formControl = input.parentElement;
//同理
formControl.classList.remove('error');
formControl.classList.add('success');
}
//邮箱验证特殊情况：邮箱格式不正确----------------------------
function valiEmail(email){
const regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
//将传过来的email值与定义的邮箱范围相比较
return regEmail.test(email);//返回true或false
}
</script>
lógica de código JS
1. Obtenga la entidad de la página (cuadro de entrada, formulario), use getElementById()
//获取页面实体（输入框、表单）
const form = document.getElementById("form");
const username = document.getElementById("username");
const email = document.getElementById("email");
const passowrd = document.getElementById("password");
const password2 = document.getElementById("password2");
2. evento de envío de formulario
//form表单提交事件
form.addEventListener('submit', (e) => {
checkInputs();
e.preventDefault();//防止浏览器刷新页面提交表单
})
3. Método de Verificación Total
//总验证方法
function checkInputs() {
//获取输入框实体的输入值
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = passowrd.value.trim();
const password2Value = password2.value.trim();
//用户名验证
if (usernameValue==="") {
setErrorFor(username, "用户名不能为空");
} else {
setSuccessFor(username);
}
//邮箱验证
if(emailValue===""){
setErrorFor(email,"邮箱不能为空");
}else if(!valiEmail(emailValue)){
//valiEmail返回的false表示邮箱不正确，则对其取反为true，if执行
setErrorFor(email,"邮箱格式不正确，请重新输入");
}else{
setSuccessFor(email);
}
//密码验证
if(passwordValue===""){
setErrorFor(password,"密码不能为空");
}else{
setSuccessFor(passowrd)
}
//重复密码验证
if(password2Value===""){
setErrorFor(password2,"密码不能为空");
}else if(passwordValue!==password2Value){
setErrorFor(password2,"两次输入密码不一致，请再次输入")
}else{
setSuccessFor(password2)
}
}
4. Encapsulación simple de métodos para verificar el éxito y el fracaso
Principio de validación : agregue estilos de éxito o falla al componente principal del cuadro de entrada y agregue dinámicamente información de error de validación a la etiqueta.
método setError : el método de falla de verificación, la entrada es el nombre del componente (aquí, se escribe como entrada porque solo hay un cuadro de entrada) y el mensaje es el mensaje de error (el mensaje de mensaje de error se devuelve en el método de verificación total). Se debe prestar atención a los detalles aquí. Si solo agrega el estilo incorrecto, ingrese la información correcta nuevamente después de ingresar la información incorrecta, los dos estilos se superponen entre sí, lo que resulta en una desviación. Por lo tanto, primero debe eliminar los estilos existentes. Si no lo entiende, puede comentar el código que agrega el éxito para ver el efecto.
método setSuccess : el método de éxito de la verificación.
Método valiEmail : caso especial de verificación de correo electrónico: el formato del correo electrónico es incorrecto, compare el valor del correo electrónico pasado con el rango de correo electrónico definido y devuelva verdadero o falso.
//简单封装验证成功和失败的方法
//验证原理：输入框的父组件上添加成功或失败的样式，并且将验证错误信息动态添加到<small>标签中
//验证失败
function setErrorFor(input, message) {
//input即为组件名（在这里因只有输入框所以写成input），message是错误信息（在总验证方法中传回错误信息message）
const formControl = input.parentElement;//所验证实体（输入框）的父组件
const small = formControl.querySelector('small');
small.textContent = message;
//此处须注意细节，如果只添加错误样式，输入错误信息后再次输入正确的信息，两个样式相互重叠，造成偏差，
//所以之前应先去除已出现的样式，没明白的话，可以将添加success的代码注释掉，看看效果
formControl.classList.remove('success');
formControl.classList.add('error');
}
//验证成功
function setSuccessFor(input) {
const formControl = input.parentElement;
//同理
formControl.classList.remove('error');
formControl.classList.add('success');
}
//邮箱验证特殊情况：邮箱格式不正确
function valiEmail(email){
const regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
//将传过来的email值与定义的邮箱范围相比较
return regEmail.test(email);//返回true或false
}
4. Fin
Lo anterior es todo el contenido de la verificación del formulario, ¡consúltelo!
Si tiene alguna pregunta, puede enviar un mensaje privado, ¡bienvenido a discutir!
La versión completa del video de demostración de enseñanza está en la dirección de la estación B , preste atención, gracias, jeje.