JavaScript——案例-表单验证
需求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="reg-form" action="#" method="post">
用户名：<input type="text" name="username" id="username"><br>
<span id="username_err" class="err_msg" style="display: none">用户名输入有误</span><br>
密码：<input type="password" name="password" id="password"><br>
<span id="password_err" class="err_msg" style="display: none">密码输入有误</span><br>
<input type="submit">
</form>
<script>
// 1. 验证用户名是否符合规则
// 1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");
// 1.2 绑定onblur事件 失去焦点
usernameInput.onblur = checkUsername;
function checkUsername(){
// 1.3 获取用户输入的用户名
var username = usernameInput.value.trim(); //去除空格
var flag1 = username.length >= 6 && username.length <= 12;
// 1.4 判断用户名是否符合规则，长度6-12
if(flag1){
document.getElementById("username_err").style.display = "none";
}else{
document.getElementById("username_err").style.display = "";
}
return flag1;
}
// 1. 验证密码是否符合规则
// 1.1 获取密码的输入框
var passwordInput = document.getElementById("password");
// 1.2 绑定onblur事件 失去焦点
passwordInput.onblur = checkPassword;
function checkPassword(){
// 1.3 获取用户输入的密码
var password = passwordInput.value.trim(); //去除空格
var flag2 = password.length >= 6 && password.length <= 12;
// 1.4 判断密码是否符合规则，长度6-12
if(flag2){
document.getElementById("password_err").style.display = "none";
}else{
document.getElementById("password_err").style.display = "";
}
return flag2;
}
// 提交验证
// 1. 获取表单对象
var regForm = document.getElementById("reg-form");
// 2. 绑定 onsubmit 事件
regForm.onsubmit = function (){
// 挨个判断每一个表单项是否都符合要求，如果有一个不符合，则返回false
return checkPassword() && checkUsername();
}
</script>
</body>
</html>JavaScript——案例-表单验证的更多相关文章
- 第一百五十四节，封装库--JavaScript，表单验证--提交验证
封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...
- 第一百五十三节，封装库--JavaScript，表单验证--备注字数验证
封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...
- 第一百五十二节，封装库--JavaScript，表单验证--年月日注入
封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...
- 第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全
封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"> <h2 class ...
- 第一百五十节，封装库--JavaScript，表单验证--密码验证
封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...
- 第一百四十九节，封装库--JavaScript，表单验证--验证用户名
封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...
- JavaScript：综合案例-表单验证
综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...
- JavaScript：表单验证模型
之前做的验证提示以弹框的形式出现太丑陋了,不符合标准的验证提示.如果要想进行更好的数据验证操作,那么必须进行一些模块化设计,通过表单样式的改变来提示.其实,一般的数据验证无非就是那么几种,例如: 大多 ...
- JavaScript常用表单验证正则表达式（身份证、电话号码、邮编、日期、IP等）
身份证正则表达式 //身份证正则表达式(15位)isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//身份证正则表达式 ...
- JavaScript之表单验证讲解
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些 ...
随机推荐
- CF466E Information Graph 题解
题目链接 Luogu Codeforces 题意简述 某公司中有 \(n\) 名员工.为方便起见,将这些员工从 1 至 \(n\) 编号.起初,员工之间相互独立.接下来,会有以下 \(m\) 次操作: ...
- stream的优化：java封装的拆箱与装箱的弊端
authors.stream() .map(author->author.getAge) .map(age->age+10)//Stream<Integer> .filter( ...
- 【SpringBoot】03 自动装配原理探索
SpringBoot的依赖探索 首先是一个父级依赖管理的pom.xml [Ctrl + 左键点击]访问进去之后还有父级的父级 到最后才是我们的真正的顶级父类Pom.xml 我们当前的父级坐标 < ...
- 【转载】科研写作入门 —— 聊聊Science Research Writing for non-native Speakers of English这本书
原地址: https://zhuanlan.zhihu.com/p/623882027 平行侠: 今天我们聊一聊Science Research Writing for non-native Spea ...
- 一款比较好用的 ssh、 ftp 服务的客户端软件 —— NxShell
该软件地址: https://gitee.com/nxshell/nxshell 截图: ======================================================= ...
- 几乎纯css实现弹出框
今天需要做一个弹出框,右下角提示的那种 ,看了一两个jquery的插件 总是不太满意 .一方面js内容太多,另一方面 不太好配合已经存在的样式使用.所以 就自己用css直接实现了下 效果还可以 . 上 ...
- Apache DolphinScheduler 与 AWS 的 EMR/Redshift 集成实践分享
引言 这篇文章将给大家讲解关于DolphinScheduler与AWS的EMR和Redshift的集成实践,通过本文希望大家能更深入地了解AWS智能湖仓架构,以及DolphinScheduler在实际 ...
- 恭喜又一白鲸开源成员成为 Apache SeaTunnel PMC Member
个人简介 王海林 白鲸开源研发工程师 GitHub ID:hailin0 做过性能监控.数据开发平台等,目前聚焦在数据集成同步及其周边生态的研发 问:作为白鲸开源的一员,您为社区做出过哪些贡献?具体方 ...
- .NET 屏幕录制
窗口/屏幕截图适用于截图.批注等工具场景,时时获取窗口/屏幕图像数据流呢,下面讲下视频会议共享桌面.远程桌面这些场景是如何实现画面录制的. 常见的屏幕画面时时采集方案,主要有GDI.WGC.DXGI. ...
- 使用 onBeforeRouteLeave 组合式函数提升应用的用户体验
title: 使用 onBeforeRouteLeave 组合式函数提升应用的用户体验 date: 2024/8/14 updated: 2024/8/14 author: cmdragon exce ...