JavaScript之表单验证-程序员宅基地
技术标签： javascript 开发语言 ecmascript
前言：我们这一次讲的表单验证运用了前面几篇文章说讲的的内容，比之前的要难一些，我会在代码里以注释的形式详细的讲解。
目录
一.简单的表单验证
验证方式一:
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
color: red;
font-weight: bold;//字体粗细
}
</style>
</head>
<body>
<form action="" id="myForm">
//onkey(键)，onkeyup当键被点击
<p>名字: <input type="text" id="userName" onkeyup="checkName(this)"><span id="l1"></span></p>
<p>密码: <input type="text" id="userPwd" onkeyup="checkPwd(this)"><span id="l2"></span></p>
<p>邮箱: <input type="text" id="userEmail" onkeyup="checkEmail(this)"><span id="l3"></span></p>
<p>
<button>登录</button>
</p>
</form>
<script>
//用来检查名字是否合规
function checkName() {
/*定义一个值拿到姓名输入框值的长度*/
var length = userName.value.length
if (length > 0) {//里面有内容
//名字的大小应该在 3-6 之间（定义值的长度）
if (length >= 3 && length <= 6) {
l1.textContent = ""
return true
}
//不在区间之内
l1.textContent = "长度必须在3-6之间"
//必须return一个值，否则会被覆盖，return有中断的作用
return false
}
//里面没有内容
l1.textContent = "长度必须大于0"
return false
}
//用来检查密码是否合规
function checkPwd() {
var length = userPwd.value.length
if (length > 0) {//里面有内容
//名字的大小应该在 3-6 之间
if (length >= 3 && length <= 6) {
l2.textContent = ""
return true
}
//不在区间之内
l2.textContent = "长度必须在3-6之间"
return false
}
//里面没有内容
l2.textContent = "长度必须大于0"
return false
}
//用来检查邮箱是否合规
function checkEmail() {
var length = userEmail.value.length
if (length > 0) {//里面有内容
//名字的大小应该在 3-6 之间
if (length >= 3 && length <= 6) {
l3.textContent = ""
return true
}
//不在区间之内
l3.textContent = "长度必须在3-6之间"
return false
}
//里面没有内容
l3.textContent = "长度必须大于0"
return false
}
//添加提交事件(会具备返回值)
myForm.onsubmit = () => {
//阻止表单的提交 需要返回 false
//有两种方法
//第一种：return checkName()&&checkPwd()&&checkEmail()
//第二种：
var f1 = checkName()
var f2 = checkPwd()
var f3 = checkEmail()
return f1 && f2 && f3
}
</script>
</body>
</html>验证方式二：
这是上面代码的优化
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<form action="" id="myForm">
<p>名字: <input type="text" id="userName" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
<p>密码: <input type="text" id="userPwd" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
<p>邮箱: <input type="text" id="userEmail" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
<p>
<button>登录</button>
</p>
</form>
<script>
//用来检查是否合规
function checkLabel(obj) {
var length = obj.value.length
//input标签和span标签都在p标签里，它们是兄弟关系，可以获得下一个相邻元素
// var label=obj.nextElementSibling
//在span标签里加一个i标签，可以获得i标签父级元素相邻的上一个元素
var label = obj.parentElement.getElementsByClassName("error")[0]
if (length > 0) {//里面有内容
//名字的大小应该在 3-6 之间
if (length >= 3 && length <= 6) {
label.textContent = ""
return true
}
//不在区间之内
label.textContent = "长度必须在3-6之间"
return false
}
//里面没有内容
label.textContent = "长度必须大于0"
return false
}
//添加提交事件(会具备返回值)
myForm.onsubmit = () => {
//阻止表单的提交 需要返回 false
// return checkName()&&checkPwd()&&checkEmail()
var f1 = checkLabel(userName)
var f2 = checkLabel(userEmail)
var f3 = checkLabel(userPwd)
return f1 && f2 && f3
}
</script>
</body>
</html>运行结果：
二.正则验证
我相信各位小伙伴们应该都知道正则表达式，但我还是要讲一下， 正则表达式又称规则表达式，它是对字符串操作的一种逻辑公式，即用事先定义好的一些特定字符以及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。
正则表达式可以用来做什么?
给定一个正则表达式和另一个字符串，我们可以达到如下的目的：
1. 检查给定的字符串是否符合正则表达式的过滤逻辑，即能否匹配；
2. 可以通过正则表达式的匹配，从字符串中提取或替换特定的部分。
一.正则的规则
内容
| \d | 数字[0-9] |
| \D | 非数字^[0-9] |
| \w | 数字+英文+下划线[0-9a-zA-Z_] |
| \W | 非数字+英文+下划线^[0-9a-zA-Z_] |
| . | 任意字符 |
次数
| ？ | 0~1次 |
| + | 至少一次 |
| * | 0~任意次 |
| \d{5} | 五个数字（数字任意填） |
| \d{5,10} | 至少五次，最多10次（数字任意填 |
二.正则的注意事项
| 必须以/^开头 |
| 必须以$/结尾 |
| 不要把\写成\\ |
| 定义正则对象(例如)： var rex=/^\d{5}$/ |
| 使用正则对象(例如)： rex.test('123') |
接下来我们用正则来写一个简单验证
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<form action="" id="myForm">
<p>名字: <input type="text" id="userName" onkeyup="checkLabel(this,/^[a-zA-Z]{3,6}$/,'名字的长度在3-6')"><span><i class="error"></i></span></p>
<p>密码: <input type="text" id="userPwd" onkeyup="checkLabel(this,/^\w{6,10}$/,'密码的长度在6-10')"><span><i class="error"></i></span></p>
<p>邮箱: <input type="text" id="userEmail" onkeyup="checkLabel(this,/^\w+[.]\w+@\w+[.]\w+$/,'邮箱中必须包含@')"><span><i class="error"></i></span></p>
<p>
<button>登录</button>
</p>
</form>
<script>
//用来检查是否合规
//括号里是传入的值
function checkLabel(obj,rex,tip) {
var length = obj.value.length
var label = obj.parentElement.getElementsByClassName("error")[0]
if (length > 0) {//里面有内容
//内容在正则匹配之间
if (rex.test(obj.value)) {
label.textContent = ""
return true
}
//不在区间之内
label.textContent = tip
return false
}
//里面没有内容
label.textContent = "长度必须大于0"
return false
}
//添加提交事件(会具备返回值)
myForm.onsubmit = () => {
//阻止表单的提交 需要返回 false
// return checkName()&&checkPwd()&&checkEmail()
var f1 = checkLabel(userName)
var f2 = checkLabel(userEmail)
var f3 = checkLabel(userPwd)
return f1 && f2 && f3
}
</script>
</body>
</html>三.二级联动
二级联动这个词听起来是不是很高级，但是它其实在我们的生活中很常见，下面这个代码你们一看就知道它是什么了o(TヘTo)
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
//select 下拉框，provinces 省份，onchange 改变事件
<select id="province" onchange="myChange()"></select>
<select id="cities"></select>
<script>
//JS数组的特点
//类型不限制
//长度不限制
//数组可以是字符串
var provinces=[]
//城市
provinces["湖南省"]=["长沙","怀化","岳阳"]
provinces["广西省"]=["桂林","梧州","来宾"]
provinces["浙江省"]=["杭州","宁波","舟山"]
//省份怎么来
// for of 相当于foreach 遍历元素
// for in 遍历下标
for(let i in provinces){
//往省份的下拉框中添加选项
//appendChild 追加子节点
//<option value="i">i</option>
//第一个i是value的值，第二个i是显示的值
province.appendChild(new Option(i,i))
}
//城市里面放值
function setCity(name) {
for(let i of provinces[name]){
cities.appendChild(new Option(i,i))
}
}
setCity(province.value)
function myChange() {
//清空原来的选项
cities.innerHTML=""
//输入框和下拉框可以拿到value
setCity(province.value)
}
</script>
</body>
</html>运行结果：
好了，这篇文章到处结束了，期待我们下一篇文章相见(￣▽￣)"
智能推荐
自定义控件_继承cwnd 自定义控件-程序员宅基地
文章浏览阅读723次。新建自定义控件： 添加类－>MFC类－>选基类（可以选各种基类，如果要全部实现功能全新控件，就选CWnd）。输入类名 CxxxxWnd 生成2个文件 xxxxWnd.cpp, xxxxWnd.h;在里面添加消息的响应处理功能，尤其添加wm_paint消息的处理用来绘制控件的外观。 使用自定义控件： 1.包含xxxxWnd.h头文件。 2.如果是从 CWnd继承的自定义控件，需要动态生成控件。如_继承cwnd 自定义控件
BSN合作伙伴大会 | 赵会义：粮食行业信息化发展现状与区块链技术应用展望_bsn发展现状-程序员宅基地
文章浏览阅读313次。本期为国家粮食和物资储备局信息化推进办处长赵会义的分享，题为《粮食行业信息化探索现状与区块链技术应用展望》。_bsn发展现状
Elastic：如何成为一名 Elastic 认证工程师，Elastic 认证分析师及 Elastic 认证可观测性工程师_elasticsearch认证-程序员宅基地
文章浏览阅读2.2w次，点赞33次，收藏109次。Elasticsearch 无疑是是目前世界上最为流行的大数据搜索引擎。根据 DB - Engines 的统计，Elasticsearch 雄踞排行榜第一名，并且市场还在不断地扩大：能够成为一名 Elastic 认证工程师也是很多开发者的梦想。这个代表了 Elastic 的最高认证，在业界也得到了很高的认知度。得到认证的工程师，必须除了具有丰富的 Elastic Stack 知识，而且必须有丰富的操作及有效的解决问题的能力。拥有这个认证证书，也代表了个人及公司的荣誉。针对个人的好处是，你可以.._elasticsearch认证
驱动开发：探索DRIVER_OBJECT驱动对象_pdriver_object-程序员宅基地
文章浏览阅读7k次，点赞3次，收藏6次。本章将探索驱动程序开发的基础部分，了解驱动对象`DRIVER_OBJECT`结构体的定义，一般来说驱动程序`DriverEntry`入口处都会存在这样一个驱动对象，该对象内所包含的就是当前所加载驱动自身的一些详细参数，例如驱动大小，驱动标志，驱动名，驱动节等等，每一个驱动程序都会存在这样的一个结构。_pdriver_object
Dockerfile镜像打包_dockerfile打包镜像-程序员宅基地
文章浏览阅读1w次，点赞3次，收藏16次。docker镜像打包培训用，主要包含dockerfile介绍以及docker构建、测试和导出镜像。_dockerfile打包镜像
jenkins构建并远程发布后执行shell脚本_jenkins 执行shell脚本复制文件-程序员宅基地
文章浏览阅读2.2w次，点赞2次，收藏3次。由于jenkins远程发布war文件到不同环境下的tomcat下时，会先删除同名文件后再进行远程拷贝，此时保留在本地的配置文件需收到copy。 为实现自动化发布，特在发布后执行shell脚本,远程copy，同时重启tomcat解决步骤： 1： 2：脚本配置#!/bin/sh#datetime: 2015-3-3 17:00#autho_jenkins 执行shell脚本复制文件
随便推点
OVN Southbound DB简介及其相关命令示例_southbound databus-程序员宅基地
文章浏览阅读3k次。Southbound DB 里面有如下几张表：Chassis：chassis这个概念, Chassis 是 OVN 新增的概念，OVS 里面没有这个概念。 chassis表的每一行表示一个 HV 或者 VTEP 网关，由 ovn-controller/ovn-controller-vtep 填写，包含 chassis 的名字和 chassis 支持的封装的配置（指向表 Encap），如_southbound databus
PCAN-Explorer5安装教程_pcanexplorer5安装教程-程序员宅基地
文章浏览阅读5.7k次，点赞2次，收藏11次。PCAN-Explorer5是PCAN的主要配套软件，可以监测CAN网络数据通讯的通用工具，可以接收、发送、过滤、记录CAN报文，也可以导入dbc文件，将CAN报文解析为我们容易理解的具体的物理量。PCAN：PCAN-Explorer5软件是以上其中一款CAN盒配套一起使用的，比如小编常用的一款是PCAN-USB Pro：其他相关的详细信息大家可以登录PEAK广州虹科的官网：https://peak-system.com.cn/进行了解。下面开始安装步骤：.._pcanexplorer5安装教程
Feature Engineering for Machine Learning in Python-程序员宅基地
文章浏览阅读1.3k次。是人工智能领域的一个分支，其目的是通过训练算法模型对输入数据进行预测或分类，从而实现智能化的行为。目前，机器学习已经成为当今最火热的话题之一。无论是在医疗健康、金融、图像识别、文本处理、推荐系统、安全运维等方面，都可以利用机器学习进行高效自动化。机器学习的应用非常广泛，包括但不限于图像识别、文本处理、生物信息分析、互联网搜索推荐、垃圾邮件过滤、产品销售预测、语音识别、智能助手等。在这些应用中，特征工程(Feature engineering)是一个十分重要的环节。
PHPExcel 表格导出数据_phpexcel 导出-程序员宅基地
文章浏览阅读672次。PHPExcel表格导出数据_phpexcel 导出
JqGrid把数据行插入指定位置的方法addRowData-程序员宅基地
文章浏览阅读199次。1、首页在colModel里写好方法，如下代码options.rowId是获取当前行的编号{ label: '操作', width: 60, align: 'center', formatter: function (cellvalue, options, rowObject) { return '<span><a href="javascript:Add..._jqgrid的addrowdata方法this找不到p
linux 显卡显卡状态_linux下显卡信息的查看-程序员宅基地
文章浏览阅读718次。lspci | grep -i vga这样就可以显示机器上的显卡信息，比如[root@localhost conf]# lspci | grep -i vga01:00.0 VGA compatible controller: nVidia Corporation Device 1081 (rev a1)02:00.0 VGA compatible controller: nVidia Corp..._memory at 9c000000 (32-bit, non-prefetchable) [size=16m]