JavaScript表单验证

已于 2022-03-06 12:03:14 修改
阅读量2k 收藏 31
点赞数 11
文章标签： javascript html css 正则表达式
于 2022-03-06 12:02:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62270300/article/details/123287445
版权

目录:

表单验证概念

表单的非空判断

正则表达式

正则的规则

内容：

次数：

正则验证注意事项

案例：实现密码等级显示

用正则表达式实现表单验证

二级联动

总结：

表单验证概念

表单验证是javascript中高级选项之一

JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证

被 JavaScript验证的这些典型的表单数据有：

  1. 用户是否已填写表单中的必填项目？
  2. 用户输入的邮件地址是否合法
  3. 用户是否在输入框中输入了文本

如下图所示：

表单的非空判断

即表单里面所展示的控件的值不能为空  例如以下代码：

<!DOCTYPE html>
<html lang="en">
<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="checkName()"><span id="l1"></span></p>
    <p>密码: <input type="text" id="userPwd" onkeyup="checkPwd()"><span id="l2"></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 false
        }
        //里面没有内容
        l1.textContent = "用户名不能为空"
        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 = "密码不能为空"
        return false
    }
    //添加提交事件(会具备返回值)
    myForm.onsubmit = () => {
        //阻止表单的提交  需要返回 false
        return checkName()&&checkPwd()
    }
</script>
</body>
</html>

 效果图如下：

 注:在表单验证中需要键盘事件

onkeyup :某个键盘按键被松开时触发

onkeydown：某个键盘按键被按下时触发

onkeypress：某个键盘被按下时触发 但是它不识别功能键（shift，ctrl等等）

正则表达式

使用正则表达式可以使代码变简洁并且可以严谨的验证文本框中的内容

那么 现在让我们回忆一下正则表达式

正则的规则

内容：

\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次

正则验证注意事项

  1. 规则必须以/^开头
  2. 规则必须以&/结尾
  3. 规则只需要\d,而不是\\d
  4. 定义正则对象: var rex=/^\d{5}$/
  5. 使用正则对象：rex.test('123')

案例1：实现密码等级显示

要求：有大写字母等级加一 有小写字母等级加一 有数字有下划线等级加一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="m1">
<span id="l1"></span>
<p>
    密码等级<span id="l2"></span>
</p>
<script>
    m1.onkeyup=function (){
        //长度必须在6-10之间
        var str=m1.value
        if(str!=""){
            //定义正则
            var r1=/^\w{6,10}$/
            // 数字 英文（小写 大写） .
            var r2=/^.*[a-z].*$/
            var r3=/^.*[A-Z].*$/
            var r4=/^.*\d.*$/
            //密码等级
            var dj=""
            //开始正则验证
            if(r1.test(str)){
                l1.textContent="😄"
                if(r2.test(str))dj+="☆"
                if(r3.test(str))dj+="☆"
                if(r4.test(str))dj+="☆"
                l2.textContent=dj
                return
            }
            //不满足
            l1.textContent="不符合格式"
            return
        }
        l1.textContent="不能为空"
    }

</script>
</body>
</html>

效果图如下：



案例2：用正则表达式实现表单验证

要求：使用正则表达式对用户名、密码和邮箱进行验证

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span {
				color: red;
			}
		</style>
	</head>
	<body>
		<!-- 为什么需要使用正则   ！！   表单验证 -->
		<!-- <form onsubmit="return check()"> -->
		<form id="myForm">
			<p>用户名：<input type="text" id="userName" onkeyup="checkLable(this,/^[a-zA-Z]{3,6}$/,'名字长度在3-6')"><span><i class="error"></i></span></p>
			<p>密码：<input type="text" id="userPwd" onkeyup="checkLable(this,/^\w{6,10}$/,'密码长度在6-10')"><span><i class="error"></i></span></p>
			<p>邮箱：<input type="text" id="userEmail" onkeyup="checkLable(this,/^\w+[.]\w+@\w+[.]\w+$/,'邮箱必须包含@')"><span><i class="error"></i></span></p>
			<p><input type="submit" /></p>
		</form>
		<script>
		
		
		function checkLable(obj,rex,tip) {
			var length = obj.value.length
			// var label=obj.nextElementSibling
			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
		        var f1=checkLable(userName)
				var f2=checkLable(userEmail)
				var f3=checkLable(userPwd)
				return f1&&f2&&f3
			}
		</script>
	</body>
</html>

案例3：二级联动

要求：两个下拉框 一个实现省份一个实现城市 选择省份就会显示出现对应的城市

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="province" onchange="myChange()">
		</select>
		<select id="cities"></select>
		
		<script type="text/javascript">
		//数组
		//类型不限制
		//长度不限制
		//数组可以是字符串
		var provinces=[]
		//城市
		provinces["湖南省"]=["长沙","湘潭","常德"]
		provinces["湖北省"]=["武汉","荆州","襄阳"]
		provinces["江苏省"]=["南京","苏州","无锡"]
		
		//代省份怎么来
		//for of 相当于foreach 遍历元素
		//for in 遍历下标
		for(let i in provinces){
			//往省份的下拉框中添加选项
			//<option value ="i">i</option>
			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=""
	
				setCity(province.value)
			}
	</script>
	</body>
</html>

总结：

以上就是关于JavaScript表单验证的一些内容 之后还会更新更多关于其他的内容

欢迎大家关注！！！

時宜
关注
  • 11
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js判断登陆用户名及密码是否为空的简单实例
01-19
js判断登陆用户名及密码是否为空的简单实例 [removed] // 验证输入不为空的脚本代码 function checkForm(form) { if(form.username.value == ) { alert(用户名不能为空!); form.username.focus(); return false; } if(form.password.value == ) { alert(密码不能为空!); form.password.focus(); return false; } return true; } </script
JS 验证密码 不能为空，必须含有数字、字母、特殊字符,长度在8-12位
热门推荐
Sara的专栏
04-11 1万+
checkpassword = function(v){ var numasc = 0; var charasc = 0; var otherasc = 0; if(0==v.length){ return "密码不能为空"; }else if(v.length12){ retu
js判断账号和密码是否为空
IKUNzhenin的博客
03-06 278
如果复选框没有被选中，那么显示一个提示框，内容是"请勾选平台协议"，然后经过1.5秒后隐藏提示框，并向用户提供相应的提示。如果输入框1和输入框2都是空的，那么显示一个提示框，内容是"请完善账号密码"，然后经过1.5秒后隐藏提示框。
js之判断非空
weixin_45828554的博客
05-08 654
【代码】js之判断非空。
如何用javascript正则表达式验证身份证号码是否合法
12-13
在用户注册页面有些需求要求的比较严格，需要对身份证验证是否合法，通过此功能严格此系统软件，从而过滤到很多水客。下面就此实现方法给大家讲解下。 　　很多时候我们都是通过一组正则表达式来判断用户输入的身份证是否合法，那在用正则表达式判断之前，你对身份证号的组成有多少了解呢？下面来说说一个身份证号里面包含了多少的信息： 　　1、号码的结构 　　　　公民身份号码是特征组合码，由十七位数字本体码和一位校验码组成。排列顺序从左至右依次为：六位数字地址码，八位数字出生日期码，三位数字顺序码和一位数字校验码。 　　2、地址码(前六位数） 　　　　表示编码对象常住户口所在县(市、旗、区)的行政区划代码，按g
JavaScript正则表达式实现注册信息校验
zhansan的博客
05-28 5892
Java和JavaScript正则表达式的对比 Java中也有正则表达式,默认情况下必须要精确匹配 ;而在JS中默认是模糊匹配，只要字符串包含了正则表达式的内容就返回true 正则表达式 匹配字符串 Java中匹配结果 JavaScript中匹配结果 \d{3} a123b false true ^\d{3} 123b false true \d{3}$ a123 false true ^\d{3}$ 123 true true 注册信息校验 需求 在JS中使用正则表达
Javascript正则表达式实现输入框验证信息
m4587的博客
08-31 1573
一个正则表达式就是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。2.正则表达式验证输入框信息实现以下功能。...
JavaScript
Iwant1的博客
01-01 682
JavaScript 编程语言 1.1编程 编程：就是让计算机为解决某一个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程 计算机程序：计算机所执行的一系列的指令集合，而程序全部就是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出指令 1.2计算机语言 计算机语言:是只用于人与计算机之间的语言，它是人与计算机之间传递信息的媒介 计算机的语言的种类非常多，总的来说，分为机器语言、汇编语言、高级语言三大类 高级语言需要一个翻译器转换为计算机识别的机器语言 编程语言是主
用javascript实现用户登录验证的代码。
欣欣酱博客
04-05 5287
几种方法，仅供参考： var getCheckObject = function() { var tipP = tip = document.createElement("p"); tip.appendChild(document.createTextNode("密码错误")); var tipU = tip = document.createElement("p"); tip.appendChild(document.createTextNode("用户名错误")); .
JavaScript 表单验证
01-19
JavaScript 表单验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 表单数据经常需要使用 JavaScript 来验证其正确性： 验证表单数据是否为空？ 验证输入是否是一个正确的email地址？ 验证日期是否输入正确？ 验证表单输入内容是否为数字型？ 必填（或必选）项目 下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）： function validateF
JavaScript表单验证实现代码
12-10
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 被 JavaScript 验证的这些典型的表单数据有： 用户是否已填写表单中的必填项目？ 用户输入的邮件地址是否...
常用javascript表单验证汇总
10-23
主要介绍了一些常用javascript表单验证，文章最后还附带了一个实践案例，以验证数字为例进行讲解，感兴趣的小伙伴们可以参考一下
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 348
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1006
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 509
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 404
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
登录进行表单非空验证的代码实现
03-26
以下是使用JavaScript进行表单非空验证的代码实现： ```html <form id="myForm"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br><br> <button type="submit">Submit</button> </form> ``` ```javascript document.getElementById("myForm").addEventListener("submit", function(event) { var name = document.forms["myForm"]["name"].value; var email = document.forms["myForm"]["email"].value; var password = document.forms["myForm"]["password"].value; if (name == "") { alert("Name must be filled out!"); event.preventDefault(); } if (email == "") { alert("Email must be filled out!"); event.preventDefault(); } if (password == "") { alert("Password must be filled out!"); event.preventDefault(); } }); ``` 在上面的代码中，我们为表单元素添加了一个事件侦听器以便在表单提交时触发验证。然后，我们使用getElementById方法获取表单元素的引用，并使用.value属性获取输入字段的值。如果某个字段的值为空，则弹出一条警告消息并使用event.preventDefault()方法阻止表单提交。 请注意，您可以使用此方法对表单元素中的任何其他属性进行验证。此外，您还可以将多个验证规则组合在一起，例如：验证电子邮件地址是否有效。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值