JavaScript正则表达表单验证

最新推荐文章于 2024-04-22 03:55:26 发布

懦夫救星*

最新推荐文章于 2024-04-22 03:55:26 发布

阅读量174

点赞数

本文链接：https://blog.csdn.net/v790873/article/details/100785466

版权

邮箱提交、身份证、手机号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="mail" id="mail" value="" />
		
		
		<button>
			邮箱提交
		</button>
		
		<hr >
		<h3>身份证</h3>
		<input type="text" name="shenfen" id="shenfen" placeholder="请输入身份证号码" value="" />
		<hr >
		<h3>手机号码</h3>
		<input type="text" name="mobile" placeholder="请输入手机号码" id="mobile" value="" />
		<script type="text/javascript">
			var btn = document.querySelector("button");
			var inputDom = document.querySelector("#mail")
			/* btn.onclick = function(){
				var mailValue = document.querySelector("#mail").value;
				//邮箱的正则对象
				//单词字符+@单词字符+\.单词字符
				var regex = /\w+@\w+\.\w+/ig;
				if(regex.test(mailValue)){
					alert("输入正确")
				} else{
					alert("输入错误")
				}
			} */
			
			inputDom.oninput = function(e){
				var mailValue = document.querySelector("#mail").value;
				//邮箱的正则对象
				//单词字符+@单词字符+\.单词字符
				var regex = /\w+@\w+\.\w+/ig;
				if(regex.test(mailValue)){
					//alert("输入正确")
					inputDom.style.background="greenyellow"
				} else{
					inputDom.style.background = "hotpink"
					//alert("输入错误")
				}
			}
			
			
			var shenfenInput = document.querySelector("#shenfen");
			shenfenInput.oninput = function(){
				//身份证号码校验
				//18数字,17数字+字符
				var regex = /^\d{17}[A-z0-9]$|^\d{16}$/ig;
				if(regex.test(shenfenInput.value)){
					shenfenInput.style.background="greenyellow"
				}else{
					shenfenInput.style.background = "hotpink"
					//alert("输入错误")
				}
				
			}
			
			
			var mobileInput = document.querySelector("#mobile")
			
			
			mobileInput.oninput = function(){
				//手机校验
				var regex = /^1[0-9]{10}$/;
				if(regex.test(mobileInput.value)){
					mobileInput.style.background="greenyellow"
				}else{
					mobileInput.style.background = "hotpink"
					//alert("输入错误")
				}
			}
			
			
			
			
			
			
		</script>
		
	</body>
</html>

码的简单正则表单提交验证

懦夫救星*

关注

0
点赞
踩
0

收藏

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

邮箱提交、身份证、手机号<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text" name="mail" id="mail" ...
复制链接

扫一扫