JavaScript 表单验证

最新推荐文章于 2023-08-16 12:23:17 发布
最新推荐文章于 2023-08-16 12:23:17 发布
阅读量206 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript forms 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/peng_9/article/details/116916934
版权

这篇文章主要学习如何使用 JavaScript 原生 form 进行表单验证。
项目地址

文章目录

创建相关文件

在 VSCode 中创建 index.html、main.js、styles.css 三个文件：

文件结构

初始化相关文件

为 html 文件添加相关的结构，使用 Live Server 插件启动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <section class="container">
        <div class="header">
            <h2>创建账户</h2>
        </div>
    </section>
    <script src="./main.js"></script>
</body>
</html>

可以看到引入了 font-awesome 用于图表便捷展示。

启动

增加表单元素

增加表单控件以及相应的提交按钮等：

<form id="form" class="form">
  <div class="form-control">
    <label for="username">用户名</label>
    <input type="text" id="username" placeholder="输入用户名" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>错误信息</small>
  </div>
  <div class="form-control">
    <label for="email">邮箱地址</label>
    <input type="text" id="email" placeholder="输入邮箱" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>错误信息</small>
  </div>
  <div class="form-control">
    <label for="password">密码</label>
    <input type="password" id="password" placeholder="输入密码" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>错误信息</small>
  </div>
  <div class="form-control">
    <label for="confirm-password">确认密码</label>
    <input type="password" id="confirm-password" placeholder="确认密码" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>错误信息</small>
  </div>
  <button>提交</button>
</form>

在这里插入图片描述

设置布局样式

设置表单的布局样式，好看一点：

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-color: #ffc600;
    font-family: 'Poppins', sans-serif;
    display: grid;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,.3);
    overflow: hidden;
    width: 400px;
    max-width: 100%;
}

.header {
    border-bottom: 1px solid #f0f0f0;
    background-color: #4b88fb;
    color: #fff;
    padding: 20px 40px;
}

.header h2 {
    margin: 0;
}

.form {
    padding: 30px 40px;
}

.form button {
    background-color: #4b88fb;
    border: 2px solid #4b88fb;
    border-radius: 4px;
    color: #fff;
    display: block;
    font-family: inherit;
    font-size: 16px;
    padding: 10px;
    margin-top: 20px;
    width: 100%;
}

.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;
    border-color: #777;
}

现在我们的表单样式变为了：

在这里插入图片描述

现在我们测试一下验证成功和验证失败的情况下的样式（临时验证样式）：

为 form-control 分别添加 success 或 error 类：

  <div class="form-control success">
    <label for="username">用户名</label>
    <input type="text" id="username" placeholder="输入用户名" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>错误信息</small>
  </div>
  <div class="form-control error">
    <label for="email">邮箱地址</label>
    <input type="text" id="email" placeholder="输入邮箱" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>错误信息</small>
  </div>

样式文件中添加相应的样式：

.form-control.success input {
    border-color: #2ecc71;
}

.form-control.error input {
    border-color: #e74c3c;
}

可以看到：
在这里插入图片描述

样式符合预期，删除掉 from-control 中的 success 以及 error 类。

我们再通过样式控制相应的 icon 在正确的时候显示：

.form-control i {
    visibility: hidden;
    position: absolute;
    top: 40px;
    right: 10px;
}

.form-control.success i.fa-check-circle {
    color: #2ecc71;
    visibility: visible;
}

.form-control.error i.fa-exclamation-circle {
    color: #e74c3c;
    visibility: visible;
}

.form-control small {
    color: #e74c3c;
    position: absolute;
    bottom: 0;
    left: 0;
    visibility: hidden;
}

.form-control.error small {
    visibility: visible;
}

在这里插入图片描述

验证逻辑

首先是验证用户名的输入，不能输入空白：

const form = getElementById('form');
const username = getElementById('username');
const email = getElementById('email');
const password = getElementById('password');
const confirmPassword = getElementById('confirm-password')

form.addEventListener('submit', e => {
    e.preventDefault();

    const usernameValue = username.value.trim();
		
    if (usernameValue === '') {
        setErrorFor(username, '用户名不能为空')
    } else {
        setSuccessFor(username);
    }
});

function setErrorFor(input, message) {
    const formControl = input.parentElement;
    const small = formControl.querySelector('small');
    formControl.className = 'form-control error';
    small.innerText = message;
}

function setSuccessFor(input) {
    const formControl = input.parentElement;
    formControl.className = 'form-control success';
}

function getElementById(id) {
    return document.getElementById(id)
}

当在用户名为空的时候点击“提交”按钮，将会得到相应的错误：
在这里插入图片描述
同样的，验证 email，不过邮箱的验证需要使用正则表达式(更多关于正则表达式可以参考此处)

// ...
form.addEventListener('submit', e => {
    e.preventDefault();

    // ...
		const emailValue = email.value
    
    if (emailValue === '') {
        setErrorFor(email, '邮箱地址不能为空');
    } else if (!isEmail(emailValue)) {
        setErrorFor(email, '不正确的邮箱地址');
    } else {
        setSuccessFor(email)
    }
    //...
});

function isEmail(email) {
  return /[^@ \t\r\n]+@[^@ \t\r\n]+\.[^@ \t\r\n]+/.test(email)
}

现在，验证两个密码输入框：

form.addEventListener('submit', e => {
    e.preventDefault();

    //...
    const passwordValue = password.value.trim();
    const confirmPasswordValue = confirmPassword.value.trim();

    if (passwordValue === '') {
        setErrorFor(password, '密码不能为空');
    } else {
        setSuccessFor(password)
    }

    if (confirmPasswordValue === '') {
        setErrorFor(confirmPassword, '确认密码不能为空')
    } else if (passwordValue !== confirmPasswordValue) {
        setErrorFor(confirmPassword, '两次密码不匹配')
    } else {
        setSuccessFor(confirmPassword)
    }
  	//...
});

至此，总体验证一下，输入错误的表单信息：
在这里插入图片描述
以及修改后的正确的表单信息
在这里插入图片描述

总结

这次的表单验证只是简单的在点击“提交”按钮的时候再去验证，当然体验不会很好，实际生产中也很少使用这种方式，但是万变不离其宗，基本思路是相同的。

法研鲁迅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现from表单验证
qq_34228805的博客
06-09 2237
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.c..
JavaScript表单验证
weixin_52629592的博客
06-14 9787
表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了IO的频率,提高了效率.在表单验证中,我们通常使用如下的验证功能:验证用户名与密码为指定格式在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等验证单选框所选内容最常见的验证单选框就是验证
javaScript-06 表单验证 详细易懂，加案例分析
YZZdear的博客
03-29 1929
JavaScript表单验证，全网最详细
javascript表单验证
lijie1025的博客
03-16 1772
正则表达式适用单个字符串来描述，匹配一系列符合某个句法规则的字符串搜索模式用某种模式去匹配一类字符串的公式通过使用正则表达式，可以：1.测试字符串内的模式。2.替换文本。3.从字符串中提取字符串。//字面量方式，其由包含在斜杆之间的模式组成，如下所示：//构造函数方式，调用RegExp对象的构造函数，如下所示：var regex=/ 正则规则 /;//调用方法判断是否满足要求var flag = regex.test( '内容' );
javascript系列之表单验证
最新发布
StayAlive1887的博客
08-16 380
表单验证一般发生在服务器端，在客户端输入必要的数据然后按下submit按钮之后就可以进行服务器端的表单验证。如果客户端的数据输入不正确或有遗漏，这时候服务器端不得不发送所有的数据到客户端，并要求使用正确的信息重新提交表单。同理，”@“不应该是eamil地址的第一个字符，最后，”.“必须至少在”@"一个字符之后。在上面的表单中我们调用了validate()函数去验证数据，当onsubmit事件发生时验证数据。现在，我们将会看到在提交到web服务器之前如何验证输入的表单数据。
JavaScript表单验证实现代码
12-10
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 被 JavaScript 验证的这些典型的表单数据有： 用户是否已填写表单中的必填项目？ 用户输入的邮件地址是否...
常用javascript表单验证汇总
10-23
主要介绍了一些常用javascript表单验证，文章最后还附带了一个实践案例，以验证数字为例进行讲解，感兴趣的小伙伴们可以参考一下
JavaScript之表单验证
weixin_64938628的博客
03-06 1万+
前言：我们这一次讲的表单验证运用了前面几篇文章说讲的的内容，比之前的要难一些，我会在代码里以注释的形式详细的讲解。 目录 一.简单的表单验证 验证方式一: 验证方式二： 二.正则验证 一.正则的规则 内容 次数 二.正则的注意事项 三.二级联动 一.简单的表单验证 验证方式一: <html> <head> <meta charset="UTF-8"> <title>Title&...
js编写常用的表单验证，js表单验证完整代码
qq_36395463的博客
01-17 948
日期： 电话号码： E-mail： 金额： 输入汉字： 输入密码： 弱中强 再一次输入密码： 输入验证码：获取验证码
前端样式-卡片01
Anolzo
03-19 3139
运用到的技术： html + css+ js 样式： HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc
JavaScript实现表单验证（包含实例）
Cavewang的博客
09-06 3725
表单验证表单验证意义与场景降低服务器压力提升用户体验表单验证举例界面效果展示 表单验证意义与场景 降低服务器压力 拦截不合格的数据，避免直接提交到服务器，可以显著降低服务器开销 提升用户体验 早期的互联网，表单项都是非常多的，注册个账号，经常需要填写20+个字段。而其中有一个填写不正 确就要等待几十秒时间。如果有了表单验证，反馈是实时的，而且脚本还能把你定位到填写错误的具体 字段。现在虽然无刷新技术早已普及，但是只依赖服务端验证，还是会有几百毫秒的延迟，实际使用会 有一种很难受的粘滞感。 表单验证举例 js
javascript 快速入门之第六章 表单验证
qq_61313896的博客
03-23 1418
一：表单验证的基本概念 为了保证用户提交的信息都是正确的，保证系统的安全性，验证是必不可少的，同时也为降低服务器的压力，减少资源损耗，在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 二：表单验证的实现方式 内置对象String 正则表达式 内置对象String基本概念 String 对象用于处理文本，也就是字符串。一个字符串用于存储一系列的字符，通常 JS 字符 串是原始值，可以使用变量声明，也可以使用 new 关键...
HTML表单验证(含用户名，密码，邮箱，手机号，验证码-验证)
热门推荐
qq_46015509的博客
06-09 4万+
HTML 表单登录js简单验证
JavaScript的基础表单验证
zcj666999的博客
05-30 838
一般来说绝大多数网站都会有用户注册、用户登录这些基本的功能。 那么用户注册具体是如何实现的呢？ 登录页面 login.jsp 用户登录 JavaSpri校验 登录表单验证 1. 给登录按钮绑定点击事件 2. 获取用户姓名和密码的值 3. 判断姓名是否为空 如果姓名为空，提示用户（span标签赋值...
JavaScript正则验证
weixin_45857749的博客
06-22 4281
正则表达式的基础以及js中的应用

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值