jquery实时监测手机号是否符合规则，并根据手机号检测结果将提交按钮设为不同状态
功能：
输入手机号，实时判断手机号输入的是否符合规则：
如果不合规则，则提交按钮为禁用状态，手机号信息不可提交，按钮显示灰色背景；
如果符合规则，则可提交所输入的手机号信息，并将按钮背景设成红色。
代码如下：
<!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实时监测手机号是否符合规则，并根据手机号检测结果将提交按钮设为不同状态的更多相关文章
- js与jquery实时监听输入框值变化方法
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...
- js与jquery实时监听输入框值的oninput与onpropertychange方法
文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监 ...
- 使用joomla通过CSV文件上传数据存入数据库并使用JavaScript验证码是否符合规则
1,实现效果截图 2,A.php上传CSV文件表单 2-1:html结构使用jqeury.form.min.js表单框架异步提交 <div class="uploadFile bord ...
- apachetop 实时监测web服务器运行状况
apachetop 实时监测web服务器运行状况 我们经常会需要知道服务器的实时监测服务器的运行状况,比如哪些 URL 的访问量最大,服务器每秒的请求数,哪个搜索引擎正在抓取我们网站?面对这些问题 ...
- 移动端用js与jquery实时监听输入框值的改动
背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...
- linux下实时监测tomcat关闭并启动
linux下tomcat总是会无故出现自动关闭的情况,在暂时无法解决该问题时,就需要一个东西能实时监测tomcat是否还正常的运行,若发现已关闭时,执行启动命令. 我们可以添加一个shell脚本来实现 ...
- Linux的watch命令 — 实时监测命令的运行结果
Linux的watch命令 — 实时监测命令的运行结果 watch 是一个非常实用的命令,基本所有的 Linux 发行版都带有这个小工具,如同名字一样,watch 可以帮你监测一个命令的运行结果,省得 ...
- 用ADB(Android Debug Bridge)实时监测Android程序的运行
监控Android设备上程序的运行,需要ADB的配合,具体ADB工具的介绍以及命令选项可见博客: http://blog.csdn.net/mliubing2532/article/details ...
- linux下实时监测命令运行结果工具：watch
watch是一个非常实用的工具,可以实时监测一些经常变化的命令结果或文件,而不需要手动一次一次的输入命令. 语法: watch [选项] [命令参数] 选项: -n :指定刷新间隔时间,默认2秒. - ...
随机推荐
- BZOJ3105: [cqoi2013]新Nim游戏 博弈论+线性基
一个原来写的题. 既然最后是nim游戏,且玩家是先手,则希望第二回合结束后是一个异或和不为0的局面,这样才能必胜. 所以思考一下我们要在第一回合留下线性基 然后就是求线性基,因为要取走的最少,所以排一 ...
- iOS 发布遇到的问题 （转载）
1.ios图片命名Icon-120.png – 120×120 iphone & ipod touch(ios7) http://blog.csdn.net/xyxjn/article/de ...
- 配置hooks使svn提交后自动同步客户端代码（客户端与服务端在同一台机器上）
1.配置svn的hooks 2.实例演示 1.配置svn的hooks 1.1)配置情况 承接上篇svn搭建的文章,今次继续使用上篇文章的配置 上篇文章的地址:linux下搭建svn代码库 svn仓库所 ...
- JSP 页面缓存以及清除缓存
一.概述 缓存的思想可以应用在软件分层的各个层面.它是一种内部机制,对外界而言,是不可感知的. 数据库本身有缓存,持久层也可以缓存.(比如:hibernate,还分1级和2级缓存) 业务层也可以有缓存 ...
- Js实现MD5加密
在页面中引用md5.js文件,调用方法为 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&qu ...
- 看好你的门-客户端传数据-用java修改referer
1.简单说明 Referer.origin用来表明,浏览器向WEB服务器表明自己来自哪里.但是就它本身而言,并非完全安全. 写一个例子,可以任意修改http信息头中的referer.origin 2. ...
- 关于tag标签系统的实现
实验室的项目,需要做对用户发布的主题进行打标签的功能,纠结甚久,实现思路如下: 一.数据库表的设计 1.tag表 create table qa_tag ( tag_id int primary ke ...
- [LintCode] Paint House 粉刷房子
There are a row of n houses, each house can be painted with one of the three colors: red, blue or gr ...
- 将普通工程转为mvn标准工程（main resources)
It is sometimes required to change the default source folder working on the java project. One best e ...
- Windows8.1自定义快捷方式添加到开始屏幕
Windows8.1自定义快捷方式添加到开始屏幕 将快捷方式复制到如下路径,在开始屏幕的所有中找到对应快捷方式,右键选择添加到开始屏幕即可. C:\Users\%USERNAME%\AppData\R ...