值得收藏的八个常用的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 attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
详解redux异步操作实践
Aug 15 Javascript
Postman动态获取返回值过程详解
Jun 30 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 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版自动生成文章摘要
2008/07/23 PHP
php2html php生成静态页函数
2008/12/08 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
PHP实现百度人脸识别
2019/05/06 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
django云端留言板实例详解
2019/07/22 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
jQuery treeview树形结构应用
2021/03/24 jQuery
设计毕业生简历中的自我评价
2013/10/01 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
大学辅导员述职报告
2015/01/10 职场文书
贷款工作证明模板
2015/06/12 职场文书
国际贸易实训总结
2015/08/03 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书