功能：

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

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

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

代码如下：

<!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. 5分钟 wamp下php phpmaile发送qq邮件 2015最新方法说明

    13:40 2015/11/20 5分钟 wamp下php phpmaile发送qq邮件 2015最新方法说明 关键点:现在qq邮箱开通smtp服务后会给你一个很长的独立新密码,发邮件配置中的密码需要 ...

  2. iOS 发布遇到的问题 （转载）

    1.ios图片命名Icon-120.png – 120×120 iphone & ipod touch(ios7)  http://blog.csdn.net/xyxjn/article/de ...

  3. 深入浅出 - Android系统移植与平台开发（五）－ 定制手机模拟器ROM

    一. 修改化定制Android4.0系统 Android系统启动时,先加载Linux内核,在Linux的framebuffer驱动里可以定制开 机界面,Linux内核启动成功后,挂载根文件系统,启动A ...

  4. struts2中拦截器与过滤器的区别

    1.拦截器是基于java反射机制的,而过滤器是基于函数回调的. 2.过滤器依赖与servlet容器,而拦截器不依赖与servlet容器.  3.拦截器只能对Action请求起作用,而过滤器则可以对几乎 ...

  5. [LintCode] Surrounded Regions 包围区域

    Given a 2D board containing 'X' and 'O', capture all regions surrounded by 'X'. A region is captured ...

  6. C#面向对象整理

    一.里氏转换 (1)子类可以赋值给父类:如果有一个地方需要一个父类作为参数,我们可以给一个子类代替. (2)如果父类装的是子类对象,那么这个父类可以强转为子类对象. 二.值类型跟引用类型区别 1.在内 ...

  7. 一篇很全面的freemarker教程

    以下内容全部是网上收集: FreeMarker的模板文件并不比HTML页面复杂多少,FreeMarker模板文件主要由如下4个部分组成:1,文本:直接输出的部分2,注释:<#-- ... --& ...

  8. 【iCore3 双核心板_FPGA】实验十五：基于USART的ARM与FPGA通信实验

    实验指导书及代码包下载: http://pan.baidu.com/s/1c1RbE5E iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  9. 50分钟学会Laravel 50个小技巧

    50分钟学会Laravel 50个小技巧 时间 2015-12-09 17:13:45  Yuansir-web菜鸟 原文  http://www.yuansir-web.com/2015/12/09 ...

  10. 用GSON解析Json格式数据

    GSON是谷歌提供的开源库,用来解析Json格式的数据,非常好用.如果要使用GSON的话,则要先下载gson-2.2.4.jar这个文件,如果是在Android项目中使用,则在Android项目的li ...