未登录状态不允许浏览的方法,js正则表达式验证

yyyy-mm-dd正则表达式校验

基础思路就是使用vuex状态管理来存储登录状态(其实就是存一个值,例如token),然后在路由跳转前进行登录状态的判断,可以使用vue-router的全局前置守卫beforeEach,也可以使用路由独享的守卫beforeEnter。

图片 1
图片 2//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
图片 3/**************************
图片 4以下函数调用方式:
图片 5    function check()
图片 6    {
图片 7        var bb = document.getElementById(“txt_id”).value;//txt_id为文本框的ID
图片 8        alert(ismobile(bb));//ismobile 代表以下任何一个函数名称
图片 9    }
图片 10HTML代码:
图片 11    <input type=”text” name=”textfield” id=”txt_id”  />
图片 12    <input type=”submit” name=”Submit” value=”提交” onclick=”check()” />
图片 13**************************/
图片 14// 判断输入是否是一个由 0-9 / A-Z / a-z 组成的字符串
图片 15function isalphanumber(str)
图片 16{
图片 17    var result=str.match(/^[a-zA-Z0-9]+$/);
图片 18    if(result==null) return false;
图片 19    return true;
图片 20}
图片 21
图片 22
图片 23// 判断输入是否是一个数字–(数字包含小数)–
图片 24function isnumber(str)
图片 25{
图片 26    return !isNaN(str);
图片 27}
图片 28
图片 29
图片 30// 判断输入是否是一个整数
图片 31function isint(str)
图片 32{
图片 33    var result=str.match(/^(-|\+)?\d+$/);
图片 34    if(result==null) return false;
图片 35    return true;
图片 36}
图片 37
图片 38
图片 39// 判断输入是否是有效的长日期格式 – “YYYY-MM-DD HH:MM:SS” || “YYYY/MM/DD HH:MM:SS”
图片 40function isdatetime(str)
图片 41{
图片 42    var result=str.match(/^(\d{4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/);
图片 43    if(result==null) return false;
图片 44    var d= new Date(result[1], result[3]-1, result[4], result[5], result[6], result[7]);
图片 45    return (d.getFullYear()==result[1]&&(d.getMonth()+1)==result[3]&&d.getDate()==result[4]&&d.getHours()==result[5]&&d.getMinutes()==result[6]&&d.getSeconds()==result[7]);
图片 46}
图片 47
图片 48
图片 49// 检查是否为 YYYY-MM-DD || YYYY/MM/DD 的日期格式
图片 50function isdate(str){
图片 51   var result=str.match(/^(\d{4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
图片 52   if(result==null) return false;
图片 53   var d=new Date(result[1], result[3]-1, result[4]);
图片 54   return (d.getFullYear()==result[1] && d.getMonth()+1==result[3] && d.getDate()==result[4]);
图片 55}
图片 56
图片 57
图片 58// 判断输入是否是有效的电子邮件
图片 59function isemail(str)
图片 60{
图片 61    var result=str.match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/);
图片 62    if(result==null) return false;
图片 63    return true;
图片 64}
图片 65
图片 66
图片 67// 去除字符串的首尾的空格
图片 68function trim(str){
图片 69   return str.replace(/(^\s*)|(\s*$)/g, “”);
图片 70}
图片 71
图片 72
图片 73// 返回字符串的实际长度, 一个汉字算2个长度
图片 74function strlen(str){
图片 75   return str.replace(/[^\x00-\xff]/g, “**”).length;
图片 76}
图片 77
图片 78
图片 79//匹配中国邮政编码(6位)
图片 80function ispostcode(str)
图片 81{
图片 82    var result=str.match(/[1-9]\d{5}(?!\d)/);
图片 83    if(result==null) return false;
图片 84    return true;
图片 85}
图片 86//匹配国内电话号码(0511-4405222 或 021-87888822)
图片 87function istell(str)
图片 88{
图片 89    var result=str.match(/\d{3}-\d{8}|\d{4}-\d{7}/);
图片 90    if(result==null) return false;
图片 91    return true;
图片 92}
图片 93
图片 94//校验是否为(0-10000)的整数
图片 95function isint1(str)
图片 96{
图片 97    var result=str.match(/^[0-9]$|^([1-9])([0-9]){0,3}$|^10000$/);
图片 98    if(result==null) return false;
图片 99    return true;
图片 100}
图片 101
图片 102
图片 103//匹配腾讯QQ号
图片 104function isqq(str)
图片 105{
图片 106    var result=str.match(/[1-9][0-9]{4,}/);
图片 107    if(result==null) return false;
图片 108    return true;
图片 109}
图片 110
图片 111
图片 112//匹配身份证(15位或18位)
图片 113function isidcard(str)
图片 114{
图片 115    var result=str.match(/\d{15}|\d{18}/);
图片 116    if(result==null) return false;
图片 117    return true;
图片 118}
图片 119//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
图片 120
图片 121////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
图片 122
图片 123//校验文本是否为空
图片 124function checknull(field,sval)
图片 125{
图片 126    if (field.value ==””)
图片 127      {
图片 128        alert(“请填写” + sval + “!”);
图片 129        field.focus();
图片 130        return false;
图片 131      }
图片 132      return true;
图片 133}
图片 134
图片 135
图片 136//屏蔽输入字符
图片 137/***********************
图片 138调用方法:    
图片 139    在文本框中加上  onkeypress=”return checkChar()”
图片 140*************************/
图片 141function checkChar()
图片 142{   
图片 143    var keycode = event.keyCode;
图片 144    if(!(keycode>=48&&keycode<=57))
图片 145    {
图片 146        return false;
图片 147    }
图片 148}
图片 149
图片 150
图片 151/***************************************************************************************************************************
图片 152中国电话号码验证 
图片 153匹配形式如:0511-4405222 或者021-87888822 或者 021-44055520-555 或者 (0511)4405222 
图片 154正则表达式 “((d{3,4})|d{3,4}-)?d{7,8}(-d{3})*” 
图片 155
图片 156中国邮政编码验证 
图片 157匹配形式如:215421 
图片 158正则表达式 “d{6}” 
图片 159
图片 160电子邮件验证 
图片 161匹配形式如:justali@justdn.com 
图片 162正则表达式 “w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*” 
图片 163
图片 164身份证验证 
图片 165匹配形式如:15位或者18位身份证 
图片 166正则表达式 “d{18}|d{15}” 
图片 167
图片 168常用数字验证 
图片 169正则表达式  
图片 170“d{n}” n为规定长度 
图片 171“d{n,m}” n到m的长度范围 
图片 172
图片 173非法字符验证 
图片 174匹配非法字符如:< > & / ‘ |  
图片 175正则表达式 [^<>&/|’\]+ 
图片 176
图片 177日期验证 
图片 178匹配形式如:20030718,030718 
图片 179范围:1900–2099 
图片 180正则表达式((((19){1}|(20){1})d{2})|d{2})[01]{1}d{1}[0-3]{1}d{1}
图片 181
图片 182
图片 183
图片 184
图片 185匹配中文字符的正则表达式: [\u4e00-\u9fa5]
图片 186评注:匹配中文还真是个头疼的事,有了这个表达式就好办了
图片 187
图片 188匹配双字节字符(包括汉字在内):[^\x00-\xff]
图片 189评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)
图片 190
图片 191匹配空白行的正则表达式:\n\s*\r
图片 192评注:可以用来删除空白行
图片 193
图片 194匹配HTML标记的正则表达式:< (\S*?)[^>]*>.*?|< .*? />
图片 195评注:网上流传的版本太糟糕,上面这个也仅仅能匹配部分,对于复杂的嵌套标记依旧无能为力
图片 196
图片 197匹配首尾空白字符的正则表达式:^\s*|\s*$
图片 198评注:可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式
图片 199
图片 200匹配Email地址的正则表达式:\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
图片 201评注:表单验证时很实用
图片 202
图片 203匹配网址URL的正则表达式:[a-zA-z]+://[^\s]*
图片 204评注:网上流传的版本功能很有限,上面这个基本可以满足需求
图片 205
图片 206匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$
图片 207评注:表单验证时很实用
图片 208
图片 209匹配国内电话号码:\d{3}-\d{8}|\d{4}-\d{7}
图片 210评注:匹配形式如 0511-4405222 或 021-87888822
图片 211
图片 212匹配腾讯QQ号:[1-9][0-9]{4,}
图片 213评注:腾讯QQ号从10000开始
图片 214
图片 215匹配中国邮政编码:[1-9]\d{5}(?!\d)
图片 216评注:中国邮政编码为6位数字
图片 217
图片 218匹配身份证:\d{15}|\d{18}
图片 219评注:中国的身份证为15位或18位
图片 220
图片 221匹配ip地址:\d+\.\d+\.\d+\.\d+
图片 222评注:提取ip地址时有用
图片 223
图片 224提取信息中的ip地址:  
图片 225(\d+)\.(\d+)\.(\d+)\.(\d+)    
图片 226
图片 227提取信息中的中国手机号码:
图片 228(86)*0*13\d{9}    
图片 229
图片 230提取信息中的中国固定电话号码:
图片 231(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}    
图片 232
图片 233提取信息中的中国电话号码(包括移动和固定电话):
图片 234(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}    
图片 235
图片 236提取信息中的中国邮政编码:
图片 237[1-9]{1}(\d+){5}    
图片 238
图片 239提取信息中的中国身份证号码:
图片 240\d{18}|\d{15}    
图片 241
图片 242提取信息中的整数:
图片 243\d+    
图片 244
图片 245提取信息中的浮点数(即小数):
图片 246(-?\d*)\.?\d+    
图片 247
图片 248提取信息中的任何数字  :
图片 249(-?\d*)(\.\d+)?  
图片 250
图片 251提取信息中的中文字符串:
图片 252[\u4e00-\u9fa5]*    
图片 253
图片 254提取信息中的双字节字符串  (汉字):
图片 255[^\x00-\xff]*  
图片 256
图片 257提取信息中的英文字符串:
图片 258\w*
图片 259提取信息中的网络链接:
图片 260(h|H)(r|R)(e|E)(f|F)  *=  *(‘|”)?(\w|\\|\/|\.)+(‘|”|  *|>)?   
图片 261
图片 262提取信息中的邮件地址:
图片 263\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*  
图片 264
图片 265提取信息中的图片链接:
图片 266(s|S)(r|R)(c|C)  *=  *(‘|”)?(\w|\\|\/|\.)+(‘|”|  *|>)?
图片 267
图片 268
图片 269
图片 270匹配特定数字:
图片 271^[1-9]\d*$    //匹配正整数
图片 272^-[1-9]\d*$   //匹配负整数
图片 273^-?[1-9]\d*$   //匹配整数
图片 274^[1-9]\d*|0$  //匹配非负整数(正整数 + 0)
图片 275^-[1-9]\d*|0$   //匹配非正整数(负整数 + 0)
图片 276^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$   //匹配正浮点数
图片 277^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$  //匹配负浮点数
图片 278^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$  //匹配浮点数
图片 279^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$   //匹配非负浮点数(正浮点数 + 0)
图片 280^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$  //匹配非正浮点数(负浮点数 + 0)
图片 281评注:处理大量数据时有用,具体应用时注意修正
图片 282
图片 283匹配特定字符串:
图片 284^[A-Za-z]+$  //匹配由26个英文字母组成的字符串
图片 285^[A-Z]+$  //匹配由26个英文字母的大写组成的字符串
图片 286^[a-z]+$  //匹配由26个英文字母的小写组成的字符串
图片 287^[A-Za-z0-9]+$  //匹配由数字和26个英文字母组成的字符串
图片 288^\w+$  //匹配由数字、26个英文字母或者下划线组成的字符串
图片 289评注:最基本也是最常用的一些表达式
图片 290
图片 291
图片 292
图片 293
图片 294////////////////////前4行程序用于保护js代码不被下载
图片 295// ////////////////////基本正则表达式/////////////////// 
图片 296//非空验证 function NotNull (str) { return (str!=””); } 
图片 297//邮件地址验证 
图片 298function checkEmail (str) {
图片 299    //邮件地址正则表达式 isEmail1=/^\w+([\.\-]\w+)*\@\w+([\.\-]\w+)*\.\w+$/; 
图片 300    //邮件地址正则表达式 isEmail2=/^.*@[^_]*$/; 
图片 301    //验证邮件地址,返回结果 return (isEmail1.test(str)&&isEmail2.test(str)); 
图片 302    } //身份证验证 function checkIDCard (str) { 
图片 303        //身份证正则表达式(15位) 
图片 304        isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/; 
图片 305        //身份证正则表达式(18位) isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/; 
图片 306        //验证身份证,返回结果 return (isIDCard1.test(str)||isIDCard2.test(str)); } 
图片 307        //IP验证 function checkIP (str) 
图片 308        { //IP正则表达式 IP='(25[0-5]|2[0-4]\\d|1\\d\\d|\\d\\d|\\d)’; 
图片 309        IPdot=IP+’\\.’; isIPaddress=new RegExp(‘^’+IPdot+IPdot+IPdot+IP+’$’); 
图片 310        //验证IP,返回结果 return (isIPaddress.test(str)); } 
图片 311        //主页(网址)验证 function checkHomepage (str) { 
图片 312            //主页正则表达式 //isHomepage=/^\w+([\.\-]\w)*$/; isHomepage=/^\w+(\.\w+)+\.\w+$/; 
图片 313            //验证主页,返回结果 return (isHomepage.test(str)); }&n

function checkDate(inputstring){
 var regExp_Date = new
RegExp(“^((((19|20)(([02468][048])|([13579][26]))-02-29))|((20[0-9][0-9])|(19[0-9][0-9]))-((((0[1-9])|(1[0-2]))-((0[1-9])|(1\d)|(2[0-8])))|((((0[13578])|(1[02]))-31)|(((01,3-9])|(1[0-2]))-(29|30)))))$”);     
 if(!regExp_Date.test(inputstring)){
  alert(“请输入【1982-08-26】格式的日期!”);
  return false;
 }
 return true;
}

导航守卫


这里是判断YYYY-MM-DD这种格式的,基本上把闰年和2月等的情况都考虑进去了,不过我已经忘了在哪里找到的。

正如其名,vue-router“`
提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的,
单个路由独享的, 或者组件级的。
记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route
对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫。

^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$

完整的导航解析流程

 

1、导航被触发。

下面的是加了时间验证的

2、在失活的组件里调用离开守卫。

^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))
(20|21|22|23|[0-1]?\d):[0-5]?\d:[0-5]?\d$

3、调用全局的 beforeEach 守卫。


4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

5、在路由配置里调用 beforeEnter。

6、解析异步路由组件。

7、在被激活的组件里调用 beforeRouteEnter。

8、调用全局的 beforeResolve 守卫 (2.5+)。

9、导航被确认。

10、调用全局的 afterEach 钩子。

11、触发 DOM 更新。

12、用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

发表评论

电子邮件地址不会被公开。 必填项已用*标注