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

最新推荐文章于 2023-10-19 23:28:30 发布

sqxka

最新推荐文章于 2023-10-19 23:28:30 发布

阅读量332

点赞数

文章标签： javascript css html html5 css3

本文链接：https://blog.csdn.net/weixin_46390620/article/details/104807641

版权

表单验证
效果图：
输入格式正确：
在这里插入图片描述

输入格式错误：
在这里插入图片描述

基本代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单验证</title>
		<style type="text/css">
			input{
				margin:10px 0;
				margin-left:50px;
			}
			#box{
				width:500px;
				height:500px;
				border:2px solid black;
				margin:50px auto;
				padding:30px;
			}
			span{
				color:red;
			}
			#btn{
				width:100px;
				height:30px;
				background:dodgerblue;
			}
		
			
			
		</style>
	</head>
	<body>
		<div id="box">
			密码   <input type="password" id="ipt1" value="" /><span id="bz1"></span>
			<br />
			确认密码  <input type="password" id="ipt2" value=""/><span id="bz2"></span>
			<br />
			最大值  <input type="text" id="ipt3" value=""/><span id="bz3"></span>
			<br />
			最小长度  <input type="text" id="ipt4" value=""/><span id="bz4"></span>
			<br />
			手机  <input type="text" id="ipt5" value=""/><span id="bz5"></span>
			<br />
			邮箱  <input type="text" id="ipt6" value=""/><span id="bz6"></span>
			<br />
			身份证  <input type="text" id="ipt7" value=""/><span id="bz7"></span>
			<br />
			<input type="button" id="btn" value="提交" />
		</div>
		<script type="text/javascript">
			//密码大于6位数
			let aipt1 = false;
			ipt1.oninput = function(){
				let mima = /^.{6,}$/
				if(mima.test(ipt1.value)){
					bz1.innerHTML = '正确'
					aipt1 = true;
				}else{
					bz1.innerHTML = '输入有误'
					aipt1 = false;
				}
			}
			//确认密码和密码一致
			let aipt2 = false;
			ipt2.oninput = function(){
				if(ipt1.value == ipt2.value){
					bz2.innerHTML = '正确'
					aipt2 = true;
				}else{
					bz2.innerHTML = '两次输入不一致'
					aipt2 = false;
				}
			}
			//最大值为15
			let aipt3 = false;
			ipt3.oninput = function(){
				let min = /^([0-9]|10|11|12|13|14|15)$/
				if(min.test(ipt3.value)){
					bz3.innerHTML = '正确'
					aipt3 = true;
				}else{
					bz3.innerHTML = '最大值为 ：15'
					aipt3 = false;
				}
			}
			//最少输入5个字符
			let aipt4 = false;
			ipt4.oninput = function(){
				let max = /^\w{5,}$/
				if(max.test(ipt4.value)){
					bz4.innerHTML = '正确'
					aipt4 = true;
				}else{
					bz4.innerHTML = '最少输入5个字符'
					aipt4 = false;
				}
			}
			//手机号验证
			let aipt5 = false;
			ipt5.oninput = function(){
				let num = /^(13|14|15|17|18|19)\d{9}$/
				if(num.test(ipt5.value)){
					bz5.innerHTML = '正确'
					aipt5 = true;
				}else{
					bz5.innerHTML = '请输入正确的手机号码'
					aipt5 = false;
				}
			}
			//邮箱验证
			let aipt6 = false;
			ipt6.oninput = function(){
				let email = /^\w+[-+.]*\w*@([a-z0-9A-Z\u2E80-\u9FFF]-?)+(\.\w{2,6})+/
				if(email.test(ipt6.value)){
					bz6.innerHTML = '正确 '
					aipt6 = true;
				}else{
					bz6.innerHTML = '请输入规则的邮箱 '
					aipt6 = false;
				}
			}
			//身份证号验证
			let aipt7 = false;
			ipt7.oninput = function(){
				let id = /(^\d{15}$|^\d{18}$)|^\d{17}X$/
				if(id.test(ipt7.value)){
					bz7.innerHTML = '正确'
					aipt7 = true;
				}else{
					bz7.innerHTML = '请输入有效的身份证号码'
					aipt7 = false;
				}
			}
			
			
			btn.onclick = function(){
				if(aipt1&&aipt2&&aipt3&&aipt4&&aipt5&&aipt6&&aipt7){
					alert('输入正确')	
				}else{
					alert('输入错误')	
				}
			}
		
		</script>
	</body>
</html>

sqxka

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 正则表达式实现表单验证

表单验证效果图：输入格式正确：输入格式错误：基本代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>表单验证</title> <style type="text/css"> input{ ma...
复制链接

扫一扫