前端開發經常使用代碼片斷（下篇）

二12、正則表達式

//驗證郵箱

/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/

 
//驗證手機號

/^1[3|5|8|7]\d{9}$/


//驗證URL

/^http:\/\/.+\./


//驗證身份證號碼

/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/


//匹配字母、數字、中文字符

/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/


//匹配中文字符

/[\u4e00-\u9fa5]/


//匹配雙字節字符(包括漢字)

/[^\x00-\xff]/

二十3、限制字符數

<input id="txt" type="text">

//字符串截取

function getByteVal(val, max) { var returnValue = ''; var byteValLen = 0; for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null)byteValLen += 2; else byteValLen += 1; if (byteValLen > max) break; returnValue += val[i]; } return returnValue; } $('#txt').on('keyup', function () { var val = this.value; if (val.replace(/[^\x00-\xff]/g, "**").length > 14) { this.value = getByteVal(val, 14); } });

二十4、驗證碼倒計時

<input id="send" type="button" value="發送驗證碼">

一、JavaScript實現

var times = 60, // 時間設置60秒
 timer = null; document.getElementById('send').onclick = function () { // 計時開始
 timer = setInterval(function () { times--; if (times <= 0) { send.value = '發送驗證碼'; clearInterval(timer); send.disabled = false; times = 60; } else { send.value = times + '秒後重試'; send.disabled = true; } }, 1000); }

二、jQuery實現

var times = 60, timer = null; $('#send').on('click', function () { var $this = $(this); // 計時開始
 timer = setInterval(function () { times--; if (times <= 0) { $this.val('發送驗證碼'); clearInterval(timer); $this.attr('disabled', false); times = 60; } else { $this.val(times + '秒後重試'); $this.attr('disabled', true); } }, 1000); });

二十5、倒計時跳轉

<div id="showtimes"></div>

// 設置倒計時秒數 

var t = 10; // 顯示倒計時秒數 

function showTime(){ t -= 1; document.getElementById('showtimes').innerHTML= t; if(t==0){ location.href='error404.asp'; } 
 //每秒執行一次 showTime() 
 setTimeout("showTime()",1000); } showTime();

二十6、時間戳、毫秒格式化

function formatDate(now) { var y = now.getFullYear(); var m = now.getMonth() + 1; // 注意 JavaScript 月份+1

    var d = now.getDate(); var h = now.getHours(); var m = now.getMinutes(); var s = now.getSeconds(); return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s; } var nowDate = new Date(1442978789184); alert(formatDate(nowDate));

二十7、當前日期

var calculateDate = function(){ var date = new Date(); var weeks = ["日","一","二","三","四","五","六"]; return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+ date.getDate()+"日 星期"+weeks[date.getDay()]; } $(function(){ $("#dateSpan").html(calculateDate()); });

二十8、判斷週六/週日

<p id="text"></p>

function time(y,m){ var tempTime = new Date(y,m,0); var time = new Date(); var saturday = new Array(); var sunday = new Array(); for(var i=1;i<=tempTime.getDate();i++){ time.setFullYear(y,m-1,i); var day = time.getDay(); if(day == 6){ saturday.push(i); }else if(day == 0){ sunday.push(i); } } var text = y+"年"+m+"月份"+"<br />"

                +"週六："+saturday.toString()+"<br />"

                +"週日："+sunday.toString(); document.getElementById("text").innerHTML = text; } time(2018,5);

二十9、AJAX調用錯誤處理

當 Ajax 調用返回 404 或 500 錯誤時，就執行錯誤處理程序。若是沒有定義處理程序，其餘的 jQuery 代碼或會就此罷工。定義一個全局的 Ajax 錯誤處理程序

$(document).ajaxError(function (e,xhr,settings,error){ 　　console.log(error); })

三10、鏈式插件調用

jQuery 容許「鏈式」插件的方法調用，以減輕反覆查詢 DOM 並建立多個 jQuery 對象的過程。

$('#elem').show(); $('#elem').html('bla'); $('#elem').otherStuff();

經過使用鏈式，能夠改善

$('#elem').show().html('bla').otherStuff();

還有一種方法是在（前綴$）變量中高速緩存元素

var $elem = $('#elem'); $elem.show(); $elem.html('bla'); $elem.otherStuff();

鏈式和高速緩存的方法都是 jQuery 中可讓代碼變得更短和更快的最佳作法。