值得收藏的八个常用的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 相关文章推荐
xtree.js 代码
Mar 13 Javascript
jquery预加载图片的方法
May 27 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 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
我的论坛源代码(八)
2006/10/09 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
jquery获得keycode的示例代码
2013/12/30 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
pygame播放音乐的方法
2015/05/19 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
python 下载文件的几种方法汇总
2021/01/06 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
家佳咖啡店创业计划书
2013/12/27 职场文书
给儿子的表扬信
2014/01/15 职场文书
倡议书的格式写法
2015/04/28 职场文书
爱国电影观后感
2015/06/19 职场文书
2015年中秋寄语
2015/07/31 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android