值得收藏的八个常用的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单向链表的具体实现实例
Jun 21 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
javascript+css实现进度条效果
Mar 25 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实现简单汉字验证码
2015/07/28 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
Python map及filter函数使用方法解析
2020/08/06 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
美德少年事迹材料
2014/01/23 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
驳回起诉裁定书
2015/05/19 职场文书
Python实现批量自动整理文件
2022/03/16 Python
浅谈Vue的computed计算属性
2022/03/21 Vue.js
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript