?????作者名稱:DaenCode
??作者簡介:啥技術(shù)都喜歡搗鼓搗鼓,喜歡分享技術(shù)、經(jīng)驗、生活。
??人生感悟:嘗盡人生百味,方知世間冷暖。
前言
在前端開發(fā)中通常會用到校驗函數(shù),檢驗是否為空、手機號格式、身份證格式等等?,F(xiàn)按照用途分類整理出了30個常用的方法,在Vue中也可以使用,方法邏輯都是一樣的??梢院艽蟮奶岣唛_發(fā)效率。同時初學者也可以拿它用來學習JS的使用。文章來源:http://www.zghlxwxcb.cn/news/detail-620592.html
一.JS常用校驗函數(shù)
1.1.檢驗是否為空(NULL/空串)
function checkNull(str){
if(str == null || str == ""){
return false;
}
return true;
}
1.2校驗是否為純數(shù)字
function checkNum(num){
if(isNaN(num)){
return false;
}
return true;
}
1.3校驗是否為純數(shù)字(正則)
function checkNum(num){
var re = /^[0-9]+.?[0-9]*$/; //判斷字符串是否為數(shù)字 (判斷正整數(shù) /^[1-9]+[0-9]*]*$/)
if (!re.test(num)){
return false;
}
return true;
}
1.4.校驗手機號
function checkPhone(phone){
//驗證規(guī)則,第一位是【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;
}
// 是否為網(wǎng)址
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:"內(nèi)蒙古",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;//身份證地區(qū)非法;
}
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.校驗數(shù)字的表達式
數(shù)字:^[0-9]*$
n位的數(shù)字:^\d{n}$
至少n位的數(shù)字:^\d{n,}$
m-n位的數(shù)字:^\d{m,n}$
零和非零開頭的數(shù)字:^(0|[1-9][0-9]*)$
非零開頭的最多帶兩位小數(shù)的數(shù)字:^([1-9][0-9]*)+(.[0-9]{1,2})?$
帶1-2位小數(shù)的正數(shù)或負數(shù):^(\-)?\d+(\.\d{1,2})?$
正數(shù)、負數(shù)、和小數(shù):^(\-|\+)?\d+(\.\d+)?$
有兩位小數(shù)的正實數(shù):^[0-9]+(.[0-9]{2})?$
有1~3位小數(shù)的正實數(shù):^[0-9]+(.[0-9]{1,3})?$
非零的正整數(shù):^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
非零的負整數(shù):^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
非負整數(shù):^\d+$ 或 ^[1-9]\d*|0$
非正整數(shù):^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
非負浮點數(shù):^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
非正浮點數(shù):^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
正浮點數(shù):^[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]*))$
負浮點數(shù):^-([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]*)))$
浮點數(shù):^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$
2.2.校驗字符的表達式
漢字:^[\u4e00-\u9fa5]{0,}$
英文和數(shù)字:^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
長度為3-20的所有字符:^.{3,20}$
由26個英文字母組成的字符串:^[A-Za-z]+$
由26個大寫英文字母組成的字符串:^[A-Z]+$
由26個小寫英文字母組成的字符串:^[a-z]+$
由數(shù)字和26個英文字母組成的字符串:^[A-Za-z0-9]+$
由數(shù)字、26個英文字母或者下劃線組成的字符串:^\w+$ 或 ^\w{3,20}$
中文、英文、數(shù)字包括下劃線:^[\u4E00-\u9FA5A-Za-z0-9_]+$
中文、英文、數(shù)字但不包括下劃線等符號:^[\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}$
國內(nèi)電話號碼(0511-4405222、021-87888822):\d{3}-\d{8}|\d{4}-\d{7}
身份證號(15位、18位數(shù)字):^\d{15}|\d{18}$
短身份證號碼(數(shù)字、字母x結(jié)尾):^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
帳號是否合法(字母開頭,允許5-16字節(jié),允許字母數(shù)字下劃線):^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密碼(以字母開頭,長度在6~18之間,只能包含字母、數(shù)字和下劃線):^[a-zA-Z]\w{5,17}$
強密碼(必須包含大小寫字母和數(shù)字的組合,不能使用特殊字符,長度在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開頭的數(shù)字,但是,這也意味著一個字符"0"不通過,所以我們采用下面的形式:^(0|[1-9][0-9]*)$
3.一個0或者一個不以0開頭的數(shù)字.我們還可以允許開頭有一個負號:^(0|-?[1-9][0-9]*)$
4.這表示一個0或者一個可能為負的開頭不為0的數(shù)字.讓用戶以0開頭好了.把負號的也去掉,因為錢總不能是負的吧.下面我們要加的是說明可能的小數(shù)部分:^[0-9]+(.[0-9]+)?$
5.必須說明的是,小數(shù)點后面至少應(yīng)該有1位數(shù),所以"10."是不通過的,但是 "10" 和 "10.2" 是通過的:^[0-9]+(.[0-9]{2})?$
6.這樣我們規(guī)定小數(shù)點后面必須有兩位,如果你認為太苛刻了,可以這樣:^[0-9]+(.[0-9]{1,2})?$
7.這樣就允許用戶只寫一位小數(shù).下面我們該考慮數(shù)字中的逗號了,我們可以這樣:^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
8.1到3個數(shù)字,后面跟著任意個 逗號+3個數(shù)字,逗號成為可選,而不是必須:^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
備注:這就是最終結(jié)果了,別忘了"+"可以用"*"替代如果你覺得空字符串也可以接受的話(奇怪,為什么?)最后,別忘了在用函數(shù)時去掉去掉那個反斜杠,一般的錯誤都在這里
xml文件:^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
中文字符的正則表達式:[\u4e00-\u9fa5]
雙字節(jié)字符:[^\x00-\xff] (包括漢字在內(nèi),可以用來計算字符串的長度(一個雙字節(jié)字符長度計2,ASCII字符計1))
空白行的正則表達式:\n\s*\r (可以用來刪除空白行)
HTML標記的正則表達式:<(\S*?)[^>]*>.*?</\1>|<.*? /> (網(wǎng)上流傳的版本太糟糕,上面這個也僅僅能部分,對于復(fù)雜的嵌套標記依舊無能為力)
首尾空白字符的正則表達式:^\s*|\s*$或(^\s*)|(\s*$) (可以用來刪除行首行尾的空白字符(包括空格、制表符、換頁符等等),非常有用的表達式)
騰訊QQ號:[1-9][0-9]{4,} (騰訊QQ號從10000開始)
中國郵政編碼:[1-9]\d{5}(?!\d) (中國郵政編碼為6位數(shù)字
三.手機類型判斷
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)),
}
/**
* 判斷是否移動設(shè)備
*/
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;
}
/**
* 判斷是否移動設(shè)備訪問
*/
function isMobileUserAgent() {
return (/iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i
.test(window.navigator.userAgent.toLowerCase()));
}
/**
* 判斷是否蘋果移動設(shè)備訪問
*/
function isAppleMobileDevice() {
return (/iphone|ipod|ipad|Macintosh/i.test(navigator.userAgent
.toLowerCase()));
}
/**
* 判斷是否安卓移動設(shè)備訪問
*/
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;
}
四.判斷兩個日期大小
//得到日期值并轉(zhuǎn)化成日期格式
//replace(/\-/g, "\/")是根據(jù)驗證表達式把日期轉(zhuǎn)化成長日期格式
//這樣再進行判斷就好判斷了
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('開始日期要小于結(jié)束日期');
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地址轉(zhuǎn)整型
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;
}
十一.數(shù)組元素是否重復(fù)
function isRepeat(arr) { //arr是否有重復(fù)元素
var hash = {};
for (var i in arr) {
if (hash[arr[i]) return true;
hash[arr[i] = true;
}
return false;
};
十二.生成隨機數(shù)
function randombetween(min, max){
return min + (Math.random() * (max-min +1));
}
十三.數(shù)組去重
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); //結(jié)束時間,需傳入時間參數(shù)
var t=endDate.getTime()-startDate.getTime(); //時間差的毫秒數(shù)
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,性別女"
寫在最后
最后,感謝大家對于本博文的閱讀。同時,也希望此博文對你的日常開發(fā)或者學習很有幫助。文中如有錯誤或者不足之前,請大家在評論區(qū)留言,感激不盡。文章來源地址http://www.zghlxwxcb.cn/news/detail-620592.html
到了這里,關(guān)于30個前端開發(fā)中常用的JavaScript函數(shù)的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!