30个前端开发中常用的JavaScript函数

🧑‍💻作者名称：DaenCode
🎤作者简介：啥技术都喜欢捣鼓捣鼓，喜欢分享技术、经验、生活。
😎人生感悟：尝尽人生百味，方知世间冷暖。

前言

在前端开发中通常会用到校验函数，检验是否为空、手机号格式、身份证格式等等。现按照用途分类整理出了30个常用的方法，在Vue中也可以使用，方法逻辑都是一样的。可以很大的提高开发效率。同时初学者也可以拿它用来学习JS的使用。

一.JS常用校验函数

1.1.检验是否为空（NULL/空串）

function checkNull(str){  if(str == null || str == ""){  return false;  }  return true;  
}  

1.2校验是否为纯数字

function checkNum(num){if(isNaN(num)){  return false;  }  return true; 
}

1.3校验是否为纯数字（正则）

function checkNum(num){  var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 （判断正整数 /^[1-9]+[0-9]*]*$/）  if (!re.test(num)){  return false;  }  return true;  
} 

1.4.校验手机号

function checkPhone(phone){  //验证规则,第一位是【1】开头，第二位有【3,4,5,7,8】，第三位及以后可以是【0-9】  var reg = /^1[3|4|5|7|8][0-9]{9}$/; if(!reg.test(phone)){  return false;  }  return true;  
}  

1.5.校验座机号

function checkTel(tel) {  var reg = /^(\d3,4|\d{3,4}-)?\d{7,8}$/;  if (!reg.test(tel)) {  return false;  }  return true;  
} 

1.6.校验IP

var checkIp = function(ip){    var reSpaceCheck = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;    if (reSpaceCheck.test(ip)){    ip.match(reSpaceCheck);    if (RegExp.$1 <= 255 && RegExp.$1 >= 0 && RegExp.$2 <= 255 && RegExp.$2 >=0    &&RegExp.$3 <= 255 && RegExp.$3 >= 0 && RegExp.$4 <= 255 && RegExp.$4>=0){    return true;     }else{    return false;    }    }else{    return false;    }    
}

1.7.校验URL地址

function checkUrl(url) {  var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;  if (!reg.test(url)) {  return false;  }  return true;  
} 
// 是否为网址
function IsURL(strUrl) {var regular = /^\b(((https?|ftp):\/\/)?[-a-z0-9]+(\.[-a-z0-9]+)*\.(?:com|edu|gov|int|mil|net|org|biz|info|name|museum|asia|coop|aero|[a-z][a-z]|((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d))\b(\/[-a-z0-9_:\@&?=+,.!\/~%\$]*)?)$/i;if (regular.test(strUrl)) {return true;}else {return false;}
}

1.8.校验身份证

function checkIdCard(idCard) {  var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}  var iSum = 0;  var info = "";  if (!/^\d{17}(\d|x)$/i.test(idCard)){  return false;//身份证长度或格式错误  }  idCard = idCard.replace(/x$/i, "a");  if (aCity[parseInt(idCard.substr(0, 2))] == null){  return false;//身份证地区非法;  }  var sBirthday = idCard.substr(6, 4) + "-" + Number(idCard.substr(10, 2)) + "-" + Number(idCard.substr(12, 2));  var d = new Date(sBirthday.replace(/-/g, "/"));  if (sBirthday != (d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())){  return false;//身份证上的出生日期非法;  }  for (var i = 17; i >= 0; i--){  iSum += (Math.pow(2, i) % 11) * parseInt(idCard.charAt(17 - i), 11);  }  if (iSum % 11 != 1){  return false;//身份证号非法;   }  return true;  }

1.9.校验日期

/* * 检验日期 * 格式为YYYY-MM-DD */  
function checkDate(date) {  var result = date.match(/((^((1[8-9]\d{2})|([2-9]\d{3}))(-)(10|12|0?[13578])(-)(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(11|0?[469])(-)(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(0?2)(-)(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)(-)(0?2)(-)(29)$)|(^([3579][26]00)(-)(0?2)(-)(29)$)|(^([1][89][0][48])(-)(0?2)(-)(29)$)|(^([2-9][0-9][0][48])(-)(0?2)(-)(29)$)|(^([1][89][2468][048])(-)(0?2)(-)(29)$)|(^([2-9][0-9][2468][048])(-)(0?2)(-)(29)$)|(^([1][89][13579][26])(-)(0?2)(-)(29)$)|(^([2-9][0-9][13579][26])(-)(0?2)(-)(29)$))/);  if (result == null) {  return false;  }  return true;  
} 

1.10.校验邮箱

function checkEmail(email){  var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;   if(!reg.test(email)){  return false;  }  return true;  
}

1.11.校验金额

function checkMoney(money) {  if (money == '') {  return false;  }  money = money.replace(/(^\s*)|(\s*$)/g, "");  var reg = /^[0-9]*\.?[0-9]{0,2}$/;  if (!checkNum(money)) {  return false;  }  if (money.length > 3) {  if (money.substr(0, 1) == "0") {  if (money.substr(3, money.length).length > 2) {  return false;  }  }  }  if(!reg.test(money)){  return false;  }  return true;  
}

1.12.校验是否为汉字

function checkChar(charValue) {  var reg = /^[\u4e00-\u9fa5]{0,}$/;  if(!reg.test(charValue)){  return false;  }  return true;  
} 

1.13.检测密码强度

function checkPwd(str) {var nowLv = 0;if (str.length < 6) {return nowLv};if (/[0-9]/.test(str)) {nowLv++};if (/[a-z]/.test(str)) {nowLv++};if (/[A-Z]/.test(str)) {nowLv++};if (/[\.|-|_]/.test(str)) {nowLv++};return nowLv;
}
checkPwd('123') // 0
checkPwd('123ASHD') // 2
checkPwd('12asdASAD') // 3
checkPwd('123ASHD)(&!a_') // 4

1.14.校验url链接是否有效

function getUrlState(URL) {var suc = false;var xmlhttp = new ActiveXObject("microsoft.xmlhttp");xmlhttp.Open("GET", URL, false);try {xmlhttp.Send();} catch (e) {} finally {var result = xmlhttp.responseText;if (result) {if (xmlhttp.Status == 200) {suc = true;} else {suc = false;}} else {suc = false;}}return suc;
}

二.校验常用表达式

2.1.校验数字的表达式

数字：^[0-9]*$ 
n位的数字：^\d{n}$
至少n位的数字：^\d{n,}$ 
m-n位的数字：^\d{m,n}$ 
零和非零开头的数字：^(0|[1-9][0-9]*)$ 
非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$ 
带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$ 
正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$ 
有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
非零的负整数：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
非负整数：^\d+$ 或 ^[1-9]\d*|0$
非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

2.2.校验字符的表达式

汉字：^[\u4e00-\u9fa5]{0,}$ 
英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$ 
长度为3-20的所有字符：^.{3,20}$ 
由26个英文字母组成的字符串：^[A-Za-z]+$ 
由26个大写英文字母组成的字符串：^[A-Z]+$ 
由26个小写英文字母组成的字符串：^[a-z]+$ 
由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$ 
由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$ 
中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+禁止输入含有~的字符：[^~\x22]+

2.3.特殊需求表达式

Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ 
域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.? 
InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ 
手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$ 
电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$  
国内电话号码[phone])：\d{3}-\d{8}|\d{4}-\d{7} 
身份证号(15位、18位数字)：^\d{15}|\d{18}$ 
短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$ 
帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$日期格式：^\d{4}-\d{1,2}-\d{1,2}
一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$钱的输入格式：1.有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"：^[1-9][0-9]*$2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*)$3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$5.必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的：^[0-9]+(.[0-9]{2})?$6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$8.1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
中文字符的正则表达式：[\u4e00-\u9fa5]
双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
空白行的正则表达式：\n\s*\r (可以用来删除空白行)
HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字

三.手机类型判断

var BrowserInfo = {    userAgent: navigator.userAgent.toLowerCase()isAndroid: Boolean(navigator.userAgent.match(/android/ig)),isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),
}/*** 判断是否移动设备*/
function isMobile() {if (typeof this._isMobile === 'boolean') {return this._isMobile;}var screenWidth = this.getScreenWidth();var fixViewPortsExperiment = rendererModel.runningExperiments.FixViewport|| rendererModel.runningExperiments.fixviewport;var fixViewPortsExperimentRunning = fixViewPortsExperiment&& (fixViewPortsExperiment.toLowerCase() === "new");if (!fixViewPortsExperiment) {if (!this.isAppleMobileDevice()) {screenWidth = screenWidth / window.devicePixelRatio;}}var isMobileScreenSize = screenWidth < 600;var isMobileUserAgent = false;this._isMobile = isMobileScreenSize && this.isTouchScreen();return this._isMobile;
}/*** 判断是否移动设备访问*/
function isMobileUserAgent() {return (/iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase()));
}/*** 判断是否苹果移动设备访问*/
function isAppleMobileDevice() {return (/iphone|ipod|ipad|Macintosh/i.test(navigator.userAgent.toLowerCase()));
}/*** 判断是否安卓移动设备访问*/
function isAndroidMobileDevice() {return (/android/i.test(navigator.userAgent.toLowerCase()));
}/*** 判断是否Touch屏幕*/
function isTouchScreen() {return (('ontouchstart' in window) || window.DocumentTouch&& document instanceof DocumentTouch);
}/*** 判断是否在安卓上的谷歌浏览器*/
function isNewChromeOnAndroid() {if (this.isAndroidMobileDevice()) {var userAgent = navigator.userAgent.toLowerCase();if ((/chrome/i.test(userAgent))) {var parts = userAgent.split('chrome/');var fullVersionString = parts[1].split(" ")[0];var versionString = fullVersionString.split('.')[0];var version = parseInt(versionString);if (version >= 27) {return true;}}}return false;
}

四.判断两个日期大小

//得到日期值并转化成日期格式
//replace(/\-/g, "\/")是根据验证表达式把日期转化成长日期格式
//这样再进行判断就好判断了
function validateDate() {var beginDate = $("#t_datestart").val();var endDate = $("#t_dateend").val();if (beginDate.length > 0 && endDate.length>0) {var sDate = new Date(beginDate.replace(/\-/g, "\/"));                var eDate= new Date(endDate.replace(/\-/g, "\/"));                if (sDate > eDate) {alert('开始日期要小于结束日期'); return false;}}
}

五.回车提交

$("id").onkeypress = function (event) {    event = (event) ? event : ((window.event) ? window.event : "")keyCode = event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode);    if (keyCode == 13) {$("SubmitLogin").onclick();}
}

六.替换非法字符

function URLencode(sStr) {
return escape(sStr).replace(/\+/g, '%2B').replace(/\"/g, '%22').replace(/\'/g, '%27').replace(/\//g, '%2F');
};

七.获取当前时间

function GetCurrentDate() {var d = new Date();var y = d.getYear()+1900;month = add_zero(d.getMonth() + 1),days = add_zero(d.getDate()),hours = add_zero(d.getHours());minutes = add_zero(d.getMinutes()),seconds = add_zero(d.getSeconds());var str = y + '-' + month + '-' + days + ' ' + hours + ':' + minutes + ':' + seconds;        return str;}; 
function add_zero(temp) {if (temp < 10) return "0" + temp;else return temp;
}

八.加入收藏夹

function AddFavorite(sURL, sTitle) {try {window.external.addFavorite(sURL, sTitle);} catch (e) {try {window.sidebar.addPanel(sTitle, sURL, "");} catch (e) {alert("加入收藏失败，请使用Ctrl+D进行添加");}}
}

九.IP地址转整型

function _ip2int(ip) {var num = 0;ip = ip.split(".");num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256+ Number(ip[2]) * 256 + Number(ip[3]);num = num >>> 0;return num;
}

十.整型解析为IP

function _int2iP(num) {var str;var tt = new Array();tt[0] = (num >>> 24) >>> 0;tt[1] = ((num << 8) >>> 24) >>> 0;tt[2] = (num << 16) >>> 24;tt[3] = (num << 24) >>> 24;str = String(tt[0]) + "." + String(tt[1]) + "." + String(tt[2]) + "."+ String(tt[3]);return str;
}

十一.数组元素是否重复

function isRepeat(arr) {  //arr是否有重复元素var hash = {};for (var i in arr) {if (hash[arr[i］) return true;hash[arr[i］ = true;}return false;};

十二.生成随机数

function randombetween(min, max){return min + (Math.random() * (max-min +1));}

十三.数组去重

function unique(arr) {var result = [], json = {};for (var i = 0, len = arr.length; i < len; i++){if (!json[arr[i］) {json[arr[i］ = 1;result.push(arr[i]);  //返回没被删除的元素}}return result;
}

十四.到某一个时间的倒计时

function getEndTime(endTime){var startDate=new Date();  //开始时间，当前时间var endDate=new Date(endTime); //结束时间，需传入时间参数var t=endDate.getTime()-startDate.getTime();  //时间差的毫秒数var d=0,h=0,m=0,s=0;if(t>=0){d=Math.floor(t/1000/3600/24);h=Math.floor(t/1000/60/60%24);m=Math.floor(t/1000/60%60);s=Math.floor(t/1000%60);} return "剩余时间"+d+"天 "+h+"小时 "+m+" 分钟"+s+" 秒";
}getEndTime('2018/8/8 8:0:0') // "剩余时间172天 12小时 10 分钟47 秒"

十五.模板引擎

var render = function(tpl,data){return tpl.replace(/\{\{(.+?)\}\}/g,function(m,m1){return data[m1]})
}render('我是{{name}}，年龄{{age}}，性别{{sex}}',{name:'姓名',age:18,sex:'女',
}) 
// "我是姓名，年龄18，性别女"

写在最后

最后，感谢大家对于本博文的阅读。同时，也希望此博文对你的日常开发或者学习很有帮助。文中如有错误或者不足之前，请大家在评论区留言，感激不尽。