jquery验证手机号是否正确实例讲解


Posted in Javascript onNovember 17, 2015

如果要做手机号的验证,那么我们需要知道手机号码的号段。
//移动号码归属地支持号段:134 135 136 137 138 139 147 150 151 152 157 158 159 178  182 183 184 187 188

//联通号码归属地支持号段:130 131 132  145 155 156 176  186 

//电信号码归属地支持号段:133 153 177 180 181 189 
//移动运营商:170

移动:
2G号段(GSM):134-139、150、151、152、158-159;
3G号段(TD-SCDMA):157、187、188、147.
联通:
2G号段(GSM):130-132、155-156;
3G号段(WCDMA):185、186.
电信:
2G号段(CDMA):133、153;
3G号段(CDMA2000):180、189.
可以写出一个正则表达式:var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/; 
<input type="text" id="phone" name="phone" />
首先引入一个JQuery框架:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>

 校验手机号的函数:

//验证手机号
     function vailPhone(){
       var phone = jQuery("#phone").val();
       var flag = false;
       var message = "";
       var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;       
       if(phone == ''){
         message = "手机号码不能为空!";
       }else if(phone.length !=11){
         message = "请输入有效的手机号码!";
       }else if(!myreg.test(phone)){
         message = "请输入有效的手机号码!";
       }else if(checkPhoneIsExist()){
         message = "该手机号码已经被绑定!";
       }else{
           flag = true;
       }
       if(!flag){
      //提示错误效果
         //jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-error");
         //jQuery("#phoneP").html("");
         //jQuery("#phoneP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
         //jQuery("#phone").focus();
       }else{
            //提示正确效果
         //jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-success");
         //jQuery("#phoneP").html("");
         //jQuery("#phoneP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该手机号码可用");
       }
       return flag;
     }

发送请求给后台:

//验证手机号是否存在
       function checkPhoneIsExist(){
         var phone = jQuery("#phone").val();
         var flag = true;
         jQuery.ajax(
          { url: "checkPhone?t=" + (new Date()).getTime(),
            data:{phone:phone},
            dataType:"json",
               type:"GET",
               async:false,
               success:function(data) {
               var status = data.status;
               if(status == "0"){
                 flag = false;
               }
             }
        });
        return flag;
       }

java后端进行校验:

@RequestMapping(value = "/checkPhone", method = RequestMethod.GET)
  public void checkPhone(HttpServletRequest request,HttpServletResponse response) {
    
    Map<String, Object> map = new HashMap<String, Object>();
    try {
      String phone = request.getParameter("phone");
      String status = "0";
      //写查询逻辑,查出有的话,那么标记为1,否则标记为0
            //UserCellphoneAuth userCellphoneAuth = userService.findUserCellphoneAuthByPhone(phone);
      //if(userCellphoneAuth!=null){
      //  status = "1";
      //}
      map.put("status", status);
      String data = JSONObject.fromObject(map).toString();      
      response.getWriter().print(data);
      response.getWriter().flush();
      response.getWriter().close();

    } catch (Exception ex) {
      logger.error(ex.getMessage(), ex);
    }
  }

以上就是本文的全部内容,教大家如何进行jquery验证手机号是否正确,利用正则表达式,大家可以动手试一试。

Javascript 相关文章推荐
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
简单实现JS计算器功能
Dec 21 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
跟我学习javascript的prototype使用注意事项
Nov 17 #Javascript
js弹出对话框方式小结
Nov 17 #Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 #Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 #Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 #Javascript
跟我学习javascript的undefined与null
Nov 17 #Javascript
跟我学习javascript的arguments对象
Nov 16 #Javascript
You might like
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
总结一些js自定义的函数
2006/08/05 Javascript
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
Python模拟登录的多种方法(四种)
2018/06/01 Python
解决Python二维数组赋值问题
2019/11/28 Python
python3 简单实现组合设计模式
2020/07/02 Python
Python csv文件记录流程代码解析
2020/07/16 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
先进工作者获奖感言
2014/02/08 职场文书
环保倡议书400字
2014/05/15 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL