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之水平横向滚动歌词同步的应用
May 07 Javascript
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 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实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
详解python3实现的web端json通信协议
2016/12/29 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
入党积极分子自我鉴定
2014/02/18 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
美容院经理岗位职责
2014/04/03 职场文书
施工单位安全责任书
2014/07/24 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
初中班长竞选稿
2015/11/20 职场文书
素质教育培训心得体会
2016/01/19 职场文书
导游词幽默开场白
2019/06/26 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android