你的位置:首页 > Java教程

[Java教程]jquery实时监测手机号是否符合规则,并根据手机号检测结果将提交按钮设为不同状态


功能:

  输入手机号,实时判断手机号输入的是否符合规则:

  如果不合规则,则提交按钮为禁用状态,手机号信息不可提交,按钮显示灰色背景;

  如果符合规则,则可提交所输入的手机号信息,并将按钮背景设成红色。

代码如下:

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>Document</title>	<style>		.box{			width: 400px;			margin: 50px auto;			border: 1px solid #ccc;			padding: 50px;		}		#phone{			text-align: center;			margin-bottom: 20px;			border: 1px solid #ccc;			color: #333;		}		.submit,		.disable,		#phone{			display: block;			width: 190px;			height: 35px;			border-radius: 5px;			margin-left:auto;			margin-right:auto;					}		.disable{			border: none;			background-color: #ccc;			color: #fff;		}		.submit{			border: none;			background-color: red;			color: #fff;		}	</style></head><body>	<div >		<input id="phone" type="text" placeholder="输入领券手机号" maxlength="11">	  <button id="submit" disabled>确认领取</button>	</div>	<script src="jquery.min.js"></script>	<script>		$(function () {	    var $phone = $('#phone');	    var $submit = $('#submit');	    $phone.on('input propertychange', function () {	      var phone = this.value;	      if (/^((13[0-9]|15[0-9]|17[0-9]|18[0-9])+\d{8})$/.test(phone)) {	        $submit.removeClass('disable').addClass('submit').removeAttr('disabled');	      } else {	        $submit.removeClass('submit').addClass('disable').attr('disabled', 'disabled');	      }	    });  	});	</script></body></html>

 效果:

  用户输入的手机号不合规则时:

用户输入的手机号符合规则时: