功能：

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

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

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

代码如下：

<!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. 为OpenResty增加nginx_upload_module模块

    1.下载 http://www.grid.net.ru/nginx/download/nginx_upload_module-2.2.0.tar.gz 或 http://pan.baidu.com/s ...

  2. URAL 1346. Intervals of Monotonicity(DP)

    题目链接 错误的贪了一下,然后D了两下就过了.注意是不上升和不下降..不是上升和下降.. #include <cstring> #include <cstdio> #inclu ...

  3. FMS Camera对象设置说明

    目录: 1.setQuality(Camera.setQuality方法)2.quality(Camera.quality属性)3.setMode(Camera.setMode方法)4.onActiv ...

  4. Redis常用命令(一)

    Redis::__construct描述:创建一个Redis客户端范例:$redis = new Redis(); connect, open描述:实例连接到一个Redis.参数:host: stri ...

  5. Json数据格式事例查看

    最简单的一种: [{"ProvinceID":1,"ProvinceName":"北京市","DateCreated": ...

  6. 360safe安全卫士防网站攻击源码

    近段时间,公司网站老被攻击,于是研究起防止攻击方法,当然无外乎就是SQL注入之类的问题,无意间发现了一个360安全卫士提供的源码,觉得挺好的,咋们暂且不说防攻击效果,至少思路是很好的,奉献给大家,大家 ...

  7. 李洪强iOS经典面试题132-版本控制

    面试过程中,可能会问及一些关于版本控制的问题,理解下SVN和Git的原理,记住常用命令即可. SVN SVN 是集中式源代码管理工具 概念: 1> Repository 代码仓库,保存代码的仓库 ...

  8. JAVA中保留指定小数位方法

    import java.math.BigDecimal;    import java.text.DecimalFormat;    import java.text.NumberFormat;    ...

  9. Hibernate常用增删改查方法

    /** * @param obj * @return * 添加数据 */ public Serializable saveObject(Object obj){ return this.getHibe ...

  10. 禁止浏览器直接访问php文件

    框架中很多php文件并不是用来如果熟悉框架的路径就能直接访问这个文件,虽然访问到了也不能看到什么(他看到的是编译过后的html文件),但还是觉的很不安全. 可以通过下面这种方法拒绝他人的从浏览器中的访 ...