值得收藏的八个常用的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 相关文章推荐
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 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
PHP操作数组相关函数
2011/02/03 PHP
PHP 文件上传限制问题
2019/09/01 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
利用JS实现数字增长
2016/07/28 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
用Python解决计数原理问题的方法
2016/08/04 Python
详解python3中tkinter知识点
2018/06/21 Python
Python爬虫文件下载图文教程
2018/12/23 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
Python的两道面试题
2013/06/29 面试题
职业道德模范事迹材料
2014/08/24 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server