值得收藏的八个常用的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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 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如何得到当前页和上一页的地址?
2006/11/27 PHP
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
python 二维数组90度旋转的方法
2019/01/28 Python
浅谈python标准库--functools.partial
2019/03/13 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
总经理司机职责
2014/02/02 职场文书
材料会计岗位职责
2014/03/06 职场文书
最常使用的求职信
2014/05/25 职场文书
家长会欢迎标语
2014/06/24 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
可可西里观后感
2015/06/08 职场文书