前端jquery控制input只能输入符合规范的手机号码

最新推荐文章于 2022-10-31 15:37:44 发布

原创最新推荐文章于 2022-10-31 15:37:44 发布 · 8k 阅读

0 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

75 篇文章

订阅专栏

这段HTML和JavaScript代码展示了如何使用jQuery实现一个输入框，只允许用户输入符合特定规则的11位手机号码。当输入不符合规则时，会显示错误提示；若输入正确，则显示正确标志。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="inputPerameter" maxlength="11" oninput="test()"/><span class="hint_str"></span>
		<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
		<script type="text/javascript">
			var inputPerameter = $('#inputPerameter');
			var booleanValue = true,value;
			function test(){
				value = inputPerameter.val();
				if(value==''){
				booleanValue = true;
				}
				if(value.length>3){
					subValue = value.substring(-1,3);
					if(booleanValue&&subValue.length==3){
					if(subValue.substring(1,2)=='3'||subValue.substring(1,2)=='5'||subValue.substring(1,2)=='8'){	
					booleanValue = /^[1]{1}(([3]|[5]|[8]){1})([0-9]{1})$/.test(subValue);
					}else if(subValue.substring(1,2)=='4'){	
					booleanValue = /^[1]{1}[4]{1}(([5]|[7]){1})$/.test(subValue);	
					}else if(subValue.substring(1,2)=='7'){		
					booleanValue = /^[1]{1}[7]{1}(([0]|[1]|[3]|[5]|[6]|[7]|[8]){1})$/.test(subValue);		
					}else{
						booleanValue = false;
					}
				}
				}else{
				if(value.length==1){	
				booleanValue = /^[1]{1}$/.test(value);	
				}else if(value.length==2){
				booleanValue = /^[1]{1}(([3]|[4]|[5]|[7]|[8]){1})$/.test(value);	
				}else if(booleanValue&&value.length==3){
					if(value.substring(1,2)=='3'||value.substring(1,2)=='5'||value.substring(1,2)=='8'){	
					booleanValue = /^[1]{1}(([3]|[5]|[8]){1})([0-9]{1})$/.test(value);
					}else if(value.substring(1,2)=='4'){	
					booleanValue = /^[1]{1}[4]{1}(([5]|[7]){1})$/.test(value);	
					}else if(value.substring(1,2)=='7'){		
					booleanValue = /^[1]{1}[7]{1}(([0]|[1]|[3]|[5]|[6]|[7]|[8]){1})$/.test(value);		
					}else{
						booleanValue = false;
					}
				}	
				}
				if(!booleanValue||!/^\d*$/.test(value)||value.length<11){
					//显示错误标志
					$('.hint_str').css('display','block');
					$('.hint_str').html('格式错误');
					$('.hint_str').css('color','red');
				}else{
					//隐藏错误标志
					$('.hint_str').css('display','none');
				}
				if(/^\d{11}$/.test(value)&&booleanValue){
					//显示正确标志
					$('.hint_str').css('display','block');
					$('.hint_str').html('正确');
					$('.hint_str').css('color','lawngreen');
				}
			}
		</script>
	</body>
</html>