功能：

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

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

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

代码如下：

<!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 class="box">
		<input id="phone" type="text" placeholder="输入领券手机号" maxlength="11">
	    <button id="submit" class="disable" 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>

效果：

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

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

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. ACM 喷水装置（一）

    喷水装置(一) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 现有一块草坪,长为20米,宽为2米,要在横中心线上放置半径为Ri的喷水装置,每个喷水装置的效果都会让以 ...

  2. 【BZOJ】3621: 我想那还真是令人高兴啊

    http://www.lydsy.com/JudgeOnline/problem.php?id=3621 题意:给两个三角形,问A能否通过旋转伸缩到B. #include <bits/stdc+ ...

  3. BZOJ3294: [Cqoi2011]放棋子

    Description   Input 输入第一行为两个整数n, m, c,即行数.列数和棋子的颜色数.第二行包含c个正整数,即每个颜色的棋子数.所有颜色的棋子总数保证不超过nm. Output 输出 ...

  4. gcc 版本降级

    由于刚刚装了ubuntu 16.04,该版本gcc版本为5.4.0太高,很多软件不支持,所以要降版本,可以直接看(三)解决 一.gcc源代码网站 ftp://mirrors.kernel.org/gn ...

  5. 7zip ubuntu使用

    http://www.cnblogs.com/yiwd/p/3649094.html 安装: sudo apt-get install p7zip 解压: 7zr x file -r -o./path ...

  6. C#读取数据库字节流生成图片

    前台用DataList绑定 <asp:DataList ID="DataList1" runat="server"> <ItemTemplat ...

  7. JS文档生成工具：JSDoc 介绍

    JSDoc是一个根据javascript文件中注释的信息,生成API文档的工具.生成的文档是html文件.类似JavaDoc和PHPDoc. 用法 /** 一坨注释之类的 */JSDoc会从/**开头 ...

  8. webform连接ACCESS数据库

    1.先建立一个名叫mydb.accdb的access数据库 2.他它复制到webform中,放在App_Data文件夹下. 3.在App_Code文件夹下建好封装语句,查询方法,连接语句,其中stud ...

  9. c#语句 类

    知识点: 1.string类 2.Math类 3.DateTime  获取时间 for穷举 1.羽毛球拍15元,球3元,水2元.现有200元,每种至少买一个,共有多少种可能.

  10. js 查找关键字

    查找:4种: 1. 查找固定关键字,仅返回位置,可指定开始位置: var i=str.indexOf("kword"[,starti]); str.lastIndexOf(&quo ...