前端开发经常使用代码片断（下篇）

二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 中可让代码变得更短和更快的最佳作法。