功能：

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

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

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

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style>
  7. 		.box{
  8. 			width: 400px;
  9. 			margin: 50px auto;
  10. 			border: 1px solid #ccc;
  11. 			padding: 50px;
  12. 		}
  13. 		#phone{
  14. 			text-align: center;
  15. 			margin-bottom: 20px;
  16. 			border: 1px solid #ccc;
  17. 			color: #333;
  18. 		}
  19. 		.submit,
  20. 		.disable,
  21. 		#phone{
  22. 			display: block;
  23. 			width: 190px;
  24. 			height: 35px;
  25. 			border-radius: 5px;
  26. 			margin-left:auto;
  27. 			margin-right:auto;
  28.  
  29. 		}
  30. 		.disable{
  31. 			border: none;
  32. 			background-color: #ccc;
  33. 			color: #fff;
  34. 		}
  35. 		.submit{
  36. 			border: none;
  37. 			background-color: red;
  38. 			color: #fff;
  39. 		}
  40. 	</style>
  41. </head>
  42. <body>
  43. 	<div class="box">
  44. 		<input id="phone" type="text" placeholder="输入领券手机号" maxlength="11">
  45. 	    <button id="submit" class="disable" disabled>确认领取</button>
  46. 	</div>
  47. 	<script src="jquery.min.js"></script>
  48. 	<script>
  49. 		$(function () {
  50. 	        var $phone = $('#phone');
  51. 	        var $submit = $('#submit');
  52. 	        $phone.on('input propertychange', function () {
  53. 	            var phone = this.value;
  54. 	            if (/^((13[0-9]|15[0-9]|17[0-9]|18[0-9])+\d{8})$/.test(phone)) {
  55. 	                $submit.removeClass('disable').addClass('submit').removeAttr('disabled');
  56. 	            } else {
  57. 	                $submit.removeClass('submit').addClass('disable').attr('disabled', 'disabled');
  58. 	            }
  59. 	        });
  60.     	});
  61. 	</script>
  62. </body>
  63. </html>

效果：

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

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

jquery实时监测手机号是否符合规则，并根据手机号检测结果将提交按钮设为不同状态的更多相关文章

  1. js与jquery实时监听输入框值变化方法

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...

  2. js与jquery实时监听输入框值的oninput与onpropertychange方法

    文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监 ...

  3. 使用joomla通过CSV文件上传数据存入数据库并使用JavaScript验证码是否符合规则

    1,实现效果截图 2,A.php上传CSV文件表单 2-1:html结构使用jqeury.form.min.js表单框架异步提交 <div class="uploadFile bord ...

  4. apachetop 实时监测web服务器运行状况

    apachetop 实时监测web服务器运行状况   我们经常会需要知道服务器的实时监测服务器的运行状况,比如哪些 URL 的访问量最大,服务器每秒的请求数,哪个搜索引擎正在抓取我们网站?面对这些问题 ...

  5. 移动端用js与jquery实时监听输入框值的改动

    背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...

  6. linux下实时监测tomcat关闭并启动

    linux下tomcat总是会无故出现自动关闭的情况,在暂时无法解决该问题时,就需要一个东西能实时监测tomcat是否还正常的运行,若发现已关闭时,执行启动命令. 我们可以添加一个shell脚本来实现 ...

  7. Linux的watch命令 — 实时监测命令的运行结果

    Linux的watch命令 — 实时监测命令的运行结果 watch 是一个非常实用的命令,基本所有的 Linux 发行版都带有这个小工具,如同名字一样,watch 可以帮你监测一个命令的运行结果,省得 ...

  8. 用ADB(Android Debug Bridge)实时监测Android程序的运行

      监控Android设备上程序的运行,需要ADB的配合,具体ADB工具的介绍以及命令选项可见博客: http://blog.csdn.net/mliubing2532/article/details ...

  9. linux下实时监测命令运行结果工具：watch

    watch是一个非常实用的工具,可以实时监测一些经常变化的命令结果或文件,而不需要手动一次一次的输入命令. 语法: watch [选项] [命令参数] 选项: -n :指定刷新间隔时间,默认2秒. - ...

随机推荐

  1. topcoder SRM 618 DIV2 MovingRooksDiv2

    一开始Y1,Y2两个参数看不懂,再看一遍题目后才知道,vector<int>索引代表是行数,值代表的是列 此题数据量不大,直接深度搜索即可 注意这里深度搜索的访问标识不是以前的索引和元素, ...

  2. 【POJ】3071 Football

    http://poj.org/problem?id=3071 题意:2^n支队伍进行淘汰赛,每一轮都是第一个与第二个,第三个与第四个比赛,给出了这些人之间的胜率,赢了的进入下一轮,相对位置不变.一共n ...

  3. 五、点数器《苹果iOS实例编程入门教程》

    该app为应用的功能为一个简单的数数程序 现版本 SDK 8.4 Xcode 运行Xcode 选择 Create a new Xcode project ->Single View Applic ...

  4. JSONP的小示例

    jQuery中JSONP的两种实现方式: 都很简单,所以直接上代码! 前台代码如下: <script type="text/javascript"> $(functio ...

  5. 初识socket

    socket也叫套接字,用于通信的一个句柄,描述IP与端口信息,程序通过套接字可以向网络发出请求或者应答网络请求. socket起源与unix,而unix/Linux基本哲学之一就是”一切皆文件“,对 ...

  6. （转）C#特性学习与使用（为枚举定义Description）

    参考:http://blog.csdn.net/nndtdx/article/details/6905802#comments

  7. 放弃iOS4，拥抱iOS5

      前言 苹果在2011年的WWDC大会上发布了iOS5,不过考虑到要支持iOS4.x的系统,大多数App都无法使用iOS5的新特性.现在将近1年半过去了,从我们自己的App后台的统计数据.一些第三方 ...

  8. HTML DOM随笔

    编程接口 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性. 方法是您能够执行的动作(比如添加或修改元素). 属性是您能够获取或设置的值(比如节点的名称或内容). getElemen ...

  9. 快速安装zabbix agent并部署监控

    1.准备yum源: epel源:yum install -y zabbix22-agent 2.上传脚本: 上传脚本事先写好的监控脚本到/script/下面 3.修改配置文件:Server=10.10 ...

  10. Oracle恢复删除数据 && connect by 树形结构查询

    1.一个表中根据以父子级别关系查询显示出来(如图) select t.* from department t CONNECT BY PRIOR t.depid=t.supdepid ; --这样也可以 ...