javaScript_表单验证

最新推荐文章于 2024-11-13 01:18:00 发布

「已注销」

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量389

点赞数 2

文章标签： javascript postman 开发语言

本文链接：https://blog.csdn.net/qq_64164870/article/details/123335531

版权

本文介绍了前端表单验证的重要性，并通过JavaScript实现了用户输入的用户名、密码和邮箱的验证，强调了长度限制和错误提示。同时，探讨了正则表达式的规则及其在验证中的应用，包括数字、字母、下划线的匹配以及邮箱格式的校验。最后，给出了一个简单的二级联动下拉菜单的实现，展示了如何根据省份选择动态加载城市选项。

摘要由CSDN通过智能技术生成

简单验证

完成用户和密码的验证
长度为10
给出未填写提示
给出判断提示


<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style >
			span{
			color:red;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<!--为什么需要使用正则！！！表单验证-->
		<!--<form action="" onsubmit="return check()">-->
		<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>邮箱:<input type="text" id="userEmail" onkeyup="checkEmail()"><span id="l3"></span></p>			<p>
				<button>登入</button>
				</p>
			</foem>
		
		<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="长度必须大于0"
				return false
			}
			
			//用来查看密码是否合规
			function checkPwd(){
				var length=userPwd.value.length
				if(length>0){//里面有内容
					//名字的大小应该在3-6 之间
					if(length>=6&&length<=10){
						l2.textContent="嘻嘻"
						return true
					}
					//不在区间之内
					l2.textContent="长度必须在6~10之间"
					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>

正则验证

一,正则的规则

1.内容

\d 数字 [0-9]

\D 非数字 ^[0-9]

\w 数字+英文+下划线 [0-9]

\w 非数字+英文+下划线 ^[0-9]

. 任意字符

2.次数

? 0~1次

+ 至少一次

*0~ 任意次

\d{5} 五个数字

\d{5,10} 最少五次，最多10次

二.正则的注意事项

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style >
			span{
			color:red;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<!--为什么需要使用正则！！！表单验证-->
		<!--<form action="" onsubmit="return check()">-->
		<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+$/,'邮箱必须规范xx.xx@xx.xx')"><span><i  class="error"></i></span></p>			
			<p>
				<button>登入</button>
				</p>
			</foem>
		
		<script>
			//用来查看名字是否合规
			function checkLabel(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
				//return checkName()&&checkPwd()&&checkEmail()
				var f1=checkLabel(userName)
				var f2=checkLabel(userPwd)
				var f3=checkLabel(userEmail)
				return f1&&f2&&f3
			}
			</script>
	</body>
</html>

三．二级联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="pp" onchange="myChange()"></select>
		<select  id="xx"></select>
		<script>
			//数组怎么写
			//类型不限制 长度不限制 数组可以是字符串
			var provinces=[]
		//城市
		provinces["湖南省"]=["长沙","郴州","永州"]
		provinces["河南省"]=["洛阳","xx","xx"]
		provinces["湖北省"]=["武汉","宜昌","zz"]
		
		//省份怎么来
		//for循环 of 相当于foreach 遍历元素
		//for in 遍历下标
		for(var i in provinces){
			
			//往省份下拉框中添加选项
			//<option value="i"></option>
			pp.appendChild(new Option(i,i))
		}
		//城市里面放谁
		function setCity(name){
			for(let i of provinces[name]){
				xx.appendChild(new Option(i,i))
			}
		}
		setCity(pp.value)
		
		function myChange(){
			//清空原来的选项
			xx.innerHTML=""
			//输入框 和 下拉框
			setCity(pp.value)
		}
		</script>
	</body>
</html>