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 相关文章推荐
动态样式类封装JS代码
Sep 02 Javascript
JS类的封装及实现代码
Dec 02 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
详解使用create-react-app快速构建React开发环境
May 16 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的引用原因分析
2012/09/06 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
python用来获得图片exif信息的库实例分析
2015/03/16 Python
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
python提取log文件内容并画出图表
2019/07/08 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
大课间活动制度
2014/01/18 职场文书
实验教师岗位职责
2014/02/13 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
小学生通知书评语
2014/12/31 职场文书
中学推普周活动总结
2015/05/07 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
具结保证书范本
2015/05/11 职场文书
2016党员入党决心书
2015/09/22 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang