值得收藏的八个常用的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实现的网站首页随机公告随机公告
Mar 14 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
JavaScript闭包详解
Feb 02 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 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/10/08 PHP
php实现加减法验证码代码
2014/02/14 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
php 可变函数使用小结
2018/06/12 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
基于Jquery的温度计动画效果
2010/06/18 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
如何卸载python插件
2020/07/08 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
领导接待方案
2014/03/13 职场文书
python实现简单倒计时功能
2021/04/21 Python