IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript实现表单验证(包含实例) -> 正文阅读

[JavaScript知识库]JavaScript实现表单验证(包含实例)

表单验证意义与场景

降低服务器压力

拦截不合格的数据,避免直接提交到服务器,可以显著降低服务器开销

提升用户体验

早期的互联网,表单项都是非常多的,注册个账号,经常需要填写20+个字段。而其中有一个填写不正
确就要等待几十秒时间。如果有了表单验证,反馈是实时的,而且脚本还能把你定位到填写错误的具体
字段。现在虽然无刷新技术早已普及,但是只依赖服务端验证,还是会有几百毫秒的延迟,实际使用会
有一种很难受的粘滞感。

表单验证举例

js脚本定义
定义了判别用户名的方法

<script>
			function validateName(){
				var name = document.getElementById("userName").value;
				var msg=document.getElementById("nameMsg");
				if(name==null && name==""){
					msg.innerHTML="用户名不能为空!!";
					msg.style.color="red";
					return false;
				}else if(name.length<6){
					msg.innerHTML="用户名长度不合法!!";
					msg.style.color="red";
					return false;
				}
				msg.innerHTML="?";
				msg.style.color="green";
				return true;
			}
</script>

表单定义

<div>
			<form action="Success.html" method="get" enctype="multipart/form-data">
			&ensp;用户名&ensp;:<input type="text" id="userName" name="userName" placeholder="请输入用户名" required="required" onblur="validateName()">
			<span id="nameMsg">用户名长度至少6位</span>
			</form>
</div>

界面效果展示

用户名长度必须大于8位
在这里插入图片描述
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-09-07 10:43:35  更:2021-09-07 10:45:43 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/27 20:23:35-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计