功能：

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

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

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

代码如下：

<!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. topcoder SRM 618 DIV2 WritingWords

    只需要对word遍历一遍即可 int write(string word) { ; ; i < word.length(); ++ i){ cnt+=word[i]-; } return cnt ...

  2. 【BZOJ】1987: Zju2672 Fibonacci Subsequence

    题意 给出一个序列\(A\),求一个最长的满足fib性质的子序列,输出其长度及其元素(如果多种方案,输出位置最靠前的).(\(n \le 3000\)) 题解 容易想到dp,即\(d(i, j)\)表 ...

  3. CodeForces 670D1 暴力或二分

    今天,开博客,,,激动,第一次啊 嗯,,先来发水题纪念一下 D1. Magic Powder - 1   This problem is given in two versions that diff ...

  4. Spring MVC Maven 环境搭建与部署

    本文简单演示了本地开发环境的搭建.项目出包.部署运行.HelloWorld,以及部分注意事项. 起初的玩法:先安装Eclipse,然后分别下载并安装Maven.spring的插件,再进行工程模式转换, ...

  5. linux文件创建、查看、编辑命令

    一.创建文件命令 1.touch命令 linux的touch命令不常用,一般在使用make的时候可能会用到,用来修改文件时间戳,或者新建一个不存在的文件.touch   [-acm][-r   ref ...

  6. JSP 连接MySQL 5.1

    //数据库为cc, 数据表emp/*CREATE DATABASE `cc` /*!40100 COLLATE 'utf8_unicode_ci' */ CREATE TABLE `emp` ( `e ...

  7. 移位运算符(JAVA)

    java中有三种移位运算符 <<      :     左移运算符,num << 1,相当于num乘以2 >>     :     右移运算符,num >&g ...

  8. hdu 1312

    原题链接 题意:“@”为起点,“.”为路,求可以走的格子有多少个(包括起点) 水题 bfs搜一发 思路:只有可以走的节点才能进入队列,所以每次出队列时ans+1就可以了(没有退出条件,所有可进入的节点 ...

  9. LaTex Remove Left Margin 去除左边空间

    LaTex中使用itemize的时候,默认的每一项左边都有一小段距离,并不是紧贴着边缘的,那么如果我们想去掉这段距离,我们可以使用下面的命令: \usepackage{enumitem} \setli ...

  10. [CareerCup] 17.8 Contiguous Sequence with Largest Sum 连续子序列之和最大

    17.8 You are given an array of integers (both positive and negative). Find the contiguous sequence w ...