值得收藏的八个常用的js正则表达式


Posted in Javascript onOctober 19, 2018

 开发中如果有input输入框,难免就要写正则表达式,因此在这里总结了一些常见常用的正则表达式的书写方法,希望会大家有所帮助;

附图:  

值得收藏的八个常用的js正则表达式

一.手机号码

$(document).ready(function(){
  //判断输入手机号码是否正确
  $("#telephone").focus(function(){
     document.getElementById("ph-hint").innerHTML = ":open_mouth:请输入11位手机号码";

  })
  $("#telephone").blur(function(){
     if(/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/.test(this.value)){
        document.getElementById("ph-hint").innerHTML = "";
     }else if(document.getElementById("telephone").value == ""){
         document.getElementById("ph-hint").innerHTML = " 咦,手机号不能为空哦";
     }else{
        document.getElementById("ph-hint").innerHTML = " 这好像不是一个手机号码哦";
        document.getElementById("telephone").value = "";
     }
  })
})

详解:当获取焦点时,提示文字请输入手机号,然后失去焦点时判断,那段正则表达式表示的是13几,这个几0-9都可以,或者15几,但是非4的都行,或者18几,0-9都可以,然后再加8位数字,符合条件则成功,否则根据情况判断提示文字;

二.密码

$(document).ready(function(){
  //判断输入密码格式是否正确
  $("#setpassword").focus(function(){
     document.getElementById("pw-hint").innerHTML = ":open_mouth:请您输入密码,6-15个字母数字和符号两种以上组合";

  })
  $("#setpassword").blur(function(){
     if(/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?![,\.#%'\+\*\-:;^_`]+$)[,\.#%'\+\*\-:;^_`0-9A-Za-z]{6,15}$/.test(this.value)){
        document.getElementById("pw-hint").innerHTML = "";
     }else if(document.getElementById("setpassword").value == ""){
         document.getElementById("pw-hint").innerHTML = " 咦,密码不能为空哦";
     }else{
        document.getElementById("pw-hint").innerHTML = " 你的密码格式有误,请重新输入";
        document.getElementById("setpassword").value = "";
     }
  })
})

详解:当获取焦点时,提示文字请输入密码,然后失去焦点时判断,那段正则表达式表示的是可以输入0-9的数字和大小写的字母a-z,外加一些特殊符号,然后可以输入6-15位密码,符合条件则成功,否则根据情况判断提示文字;

*以下格式我就不这样写了,简介一点,上面两段可以去参考。

三.用户名

//用户名正则,4到16位(字母,数字,下划线,减号)
var username = /^[a-zA-Z0-9_-]{4,16}$/;
//文字
var username=/[\d]/g;

四.电子邮箱

//对电子邮件的验证
 var email = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

五.身份证号

//身份证号(18位)正则
var cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

六.日期

//日期正则,简单判定,未做月份及日期的判定
var time = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/;
//日期正则,复杂判定
var time = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;

七.QQ号以及微信号

//QQ号正则,5至11位
var qq = /^[1-9][0-9]{4,10}$/;
//微信号正则,6至20位,以字母开头,字母,数字,减号,下划线
var wx = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;

八.座机号

//座机号
var tel =/(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/;

附加: 发送验证码倒计时写法

<input class="login-code-send" id="login-code-send" type="button" name="sendcode" value="发送验证码" onclick="settime(this);"/>
//登录,忘记密码的验证码
var counts = 60;
function settime(val) {
  if (counts == 0) {
    val.removeAttribute("disabled");
    val.value = "获取验证码";
    counts = 60;
    return false;
  } else {
    val.setAttribute("disabled", true);
    val.value = "重新发送("+counts+")";
    counts--;
  }
  setTimeout(function () {
    settime(val);
  }, 1000);
}

总结

以上所述是小编给大家介绍的值得收藏的八个常用的js正则表达式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
Nuxt 项目性能优化调研分析
Nov 07 Javascript
深入理解移动前端开发之viewport
Oct 19 #Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 #Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 #Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 #Javascript
webstorm+vue初始化项目的方法
Oct 18 #Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 #Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 #Javascript
You might like
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
python绘制趋势图的示例
2020/09/17 Python
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
带薪年假请假条
2014/02/04 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
预备党员自我评价范文
2015/03/04 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
观看建国大业观后感
2015/06/01 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书