二十二、正则表达式
//验证邮箱
/^\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]/
二十三、限制字符数
<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);
}
});
二十四、验证码倒计时
<input id="send" type="button" value="发送验证码">
1、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);
}
2、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);
});
二十五、倒计时跳转
<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();
二十六、时间戳、毫秒格式化
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));
二十七、当前日期
var calculateDate = function(){
var date = new Date();
var weeks = ["日","一","二","三","四","五","六"];
return date.getFullYear() "年" (date.getMonth() 1) "月"
date.getDate() "日 星期" weeks[date.getDay()];
}
$(function(){
$("#dateSpan").html(calculateDate());
});
二十八、判断周六/周日
<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);
二十九、AJAX调用错误处理
当 Ajax 调用返回 404 或 500 错误时,就执行错误处理程序。如果没有定义处理程序,其他的 jQuery 代码或会就此罢工。定义一个全局的 Ajax 错误处理程序
$(document).ajaxError(function (e,xhr,settings,error){
console.log(error);
})
三十、链式插件调用
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 中可以让代码变得更短和更快的最佳做法。
更多专业前端知识,请上 【猿2048】www.mk2048.com