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 一段左右两边随屏滚动的代码
Jun 18 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
详解JavaScript函数
Dec 01 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
PHP编程网上资源导航
2006/10/09 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
php中fsockopen用法实例
2015/01/05 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
Laravel下生成验证码的类
2017/11/15 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
php生成HTML文件的类方法
2019/10/11 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
pytorch梯度剪裁方式
2020/02/04 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
木工主管岗位职责
2013/12/08 职场文书
大学四年规划书范文
2013/12/27 职场文书
大学生村官典型材料
2014/01/12 职场文书
竞赛口号大全
2014/06/16 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers