js逐步教实现表单系统
时间:2022-07-28
本文章向大家介绍js逐步教实现表单系统,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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>
图片展示:
注意一下:要写对哦.
css部分:
: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%;
}
图片展示:
注意一下: css变量:格式: 他是一个选择器. 定义变量:
--success-color:#2ecc71;
使用变量:
border-color: var(--success-color);
js逻辑:
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);
}
});
}
注意一下;这个函数的功能是;看看是否每一个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, "密码不匹配");
}
}
这个函数的功能是;看看两次输入的密码是否都一样。
- Spark源码系列(五)分布式缓存
- 看我如何基于Python;Facepp打造智能监控系统
- Spark源码系列(六)Shuffle的过程解析
- Spark源码系列(九)Spark SQL初体验之解析过程详解
- Spark源码系列(七)Spark on yarn具体实现
- 我们要在任何可能的地方测试XSS漏洞
- Angr:一个具有动态符号执行和静态分析的二进制分析工具
- Spark编程指南
- Spark Streaming编程指南
- Spark源码系列(八)Spark Streaming实例分析
- “震网三代”(CVE-2017-8464)的几种利用方法与防范
- Spark1.0新特性-->Spark SQL
- 挖洞经验 | 看我如何综合利用4个漏洞实现GitHub Enterprise 远程代码执行
- Spark的机器学习算法mlib的例子运行
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Dynamic Programming - 62. Unique Paths
- Dynamic Programming - 70. Climbing Stairs
- LinkedList - 23. Merge k Sorted Lists
- LinkedList - 86. Partition List
- LinkedList - 148. Sort List
- LinkedList - 61. Rotate List
- LinkedList - 143. Reorder List
- LinkedList - 160. Intersection of Two Linked Lists
- LinkedList - 21. Merge Two Sorted Lists
- LinkedList - 82. Remove Duplicates from Sorted List II
- LinkedList - 203. Remove Linked List Elements
- LinkedList - 83. Remove Duplicates from Sorted List
- LinkedList - 19. Remove Nth Node From End of List
- LinkedList - 92. Reverse Linked List II
- LinkedList - 328. Odd Even Linked List