功能：

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

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

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

代码如下：

<!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. Android -- TabHost

    TabHost 也就相当于Windows下的选项框 有两种实现方式 1.  继承TabActivity (已经废弃):从TabActivity中用getTabHost()方法获取TabHost 2. ...

  2. There was an internal API error.

    1.一开始以为是用了 iOS8的API, 抱着不相信的态度,我搜到了一条原因,可能是没有选择对开发者账号或需要 cmd+shift+k 来 clean 一下,无效. 2.又继续盯着这个问题,才发现我的 ...

  3. iOS 9之适配ATS（转载）

    iOS 9系统已经出来了,而网络方面的ATS(App Transport Security)特性可以说每个人都要经历.而我这篇博客,就是结合我最近几天的经历,来谈谈从服务器到iOS客户端对ATS的适配 ...

  4. FMS Camera对象设置说明

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

  5. flex关于字符串转Boolean .

    最近做一项目,输入一个boolean类型的参数,结果一致无法获取正确值,后在网上查找才发现原因如下,转帖保存一个: . "false" as Boolean //flase .&q ...

  6. GO语言练习：不定参数函数

    1.代码 2.运行 1.代码 package main import "fmt" func MyPrintf(args ...interface{}){ for _, arg := ...

  7. 如何通过js和jquery获取图片真实的宽度和高度

    什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都 ...

  8. butterknife简介及Generate ButterKnife Injections 不出现的问题解决

    一.概述 butterknife是一款as的功能强大插件.有了它,你几乎可以和findViewById说byebye了. 二.使用 github地址:https://github.com/avast/ ...

  9. ubuntu上安装Eclipse时遇到的一个错误

    A Java Runtime Environment (JRE) or Java Development Kit (JDK)must be available in order to run Ecli ...

  10. oracle中删除表中某字段出现重复的信息 保留其中一条

    记得以前有个同事问过我这个,说是以前面试的时候碰到的问题,下面我介绍三种方法. 首先我们在这里创建一个测试表添加相应的测试数据. create table test  (id number,name ...