JavaScript正则表达表单验证

淡淡的烟草味﹌ 2024-04-18 22:42 66阅读 0赞

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

<!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>

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