Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态


Posted in Javascript onNovember 26, 2015

项目需求:

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

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

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

代码如下:

<!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检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态

用户输入的手机号符合规则时:

Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态

ps:jquery验证电话号码

var isMobile=/^(?:13\d|15\d|18\d)\d{5}(\d{3}|\*{3})$/; //手机号码验证规则
var isPhone=/^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/;  //座机验证规则
var dianhua = $("#dianhua").val();          //获得用户填写的号码值 赋值给变量dianhua
if(!isMobile.test(dianhua) && !isPhone.test(dianhua)){ //如果用户输入的值不同时满足手机号和座机号的正则
  alert("请正确填写电话号码,例如:13415764179或0321-4816048"); //就弹出提示信息
  $("#dianhua").focus();    //输入框获得光标
  return false;     //返回一个错误,不向下执行
Javascript 相关文章推荐
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
详解Vue单元测试case写法
May 24 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
JS延时提示框实现方法详解
Nov 26 #Javascript
js使用cookie记录用户名的方法
Nov 26 #Javascript
Bootstrap每天必学之导航
Nov 26 #Javascript
js过滤HTML标签完整实例
Nov 26 #Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 #Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 #Javascript
Bootstrap每天必学之按钮
Nov 26 #Javascript
You might like
提升PHP执行速度全攻略
2006/10/09 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
银行开业庆典方案
2014/02/06 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
温馨提示标语
2014/06/26 职场文书
毕业证委托书范文
2014/09/26 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python