值得收藏的八个常用的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 鼠标滚轮事件
Apr 09 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 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
神族 PROTOSS 概述
2020/03/14 星际争霸
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
PHP静态文件生成类实例
2014/11/29 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
jQuery each()小议
2010/03/18 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
彪马美国官网:PUMA美国
2017/03/09 全球购物
经典c++面试题二
2015/08/14 面试题
后勤岗位职责
2013/11/26 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
中学教师教育感言
2014/02/21 职场文书
长城英文导游词
2015/01/30 职场文书
预备党员自我评价范文
2015/03/04 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸