本地存储
本地存储分为cookie,以及新增的localStorage和sessionStorage
1、cookie 存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽,可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,在设置的过期时间之前有效。
jquery 设置cookie
$.cookie('mycookie','123',{expires:7,path:'/'});
jquery 获取cookie
$.cookie('mycookie');
2、localStorage 存储在本地,容量为5M或者更大,不会在请求时候携带传递,在所有同源窗口中共享,数据一直有效,除非人为删除,可作为长期数据。
//设置:
localStorage.setItem("dat", "456");
localStorage.dat = '456';
//获取:
localStorage.getItem("dat");
localStorage.dat
//删除
localStorage.removeItem("dat");
3、sessionStorage 存储在本地,容量为5M或者更大,不会在请求时候携带传递,在同源的当前窗口关闭前有效。
localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制,可以将数据更新的通知监听者,Web Storage的api接口使用更方便。
iPhone的无痕浏览不支持Web Storage,只能用cookie。
表单验证
将html中的错误提醒设置为none
$(function(){
//定义变量,决定最终是否可以提交表单
var error_name = false;//默认没有错误
var error_member = false;
var error_txtcode = false;
var error_pwd = false;
var error_cpwd = false;//是否勾选了协议
// 失去焦点时验证用户名
$('#txtloginID').blur(function() {
check_username();
});
// 获取焦点时隐藏提示信息
$('#txtloginID').focus(function() {
$(this).next().hide();
});
// 验证码
$('#member_reg_Code').blur(function() {
check_member();
});
$('#member_reg_Code').focus(function() {
$(this).next().hide();
});
// 动态验证码
$('#txtcode').blur(function() {
check_txtcode();
});
$('#txtcode').focus(function() {
$(this).next().hide();
});
// 密码 确认密码
$('#texloginPwd1').blur(function() {
check_pwd();
});
$('#texloginPwd1').focus(function() {
$(this).next().hide();
});
$('#texloginPwd2').blur(function() {
check_cpwd();
});
$('#texloginPwd2').focus(function() {
$(this).next().hide();
});
function check_username(){
var val = $('#txtloginID').val();
var re = /^\w{5,15}$/i;
if(val == ''){
$('#txtloginID').next().html('用户名不能为空!');
$('#txtloginID').next().show();
error_name = true;
return;
}
if(re.test(val)){
error_name = false;
}else{
$('#txtloginID').next().html('用户是包含数字,下划线,字母的五到十五个字符');
$('#txtloginID').next().show();
error_name = true;
return;
}
}
function check_member(){
var val = $('#member_reg_Code').val();
var re = /^[0-9]{6,16}$/;
if(val == ''){
$('#member_reg_Code').next().html('验证码不能为空');
$('#member_reg_Code').next().show();
error_member = true;
return;
}
if(re.test(val)){
error_mamber = false;
}else{
$('#member_reg_Code').next().html('验证码是数字或字母');
$('#member_reg_Code').next().show();
error_member = true;
return;
}
}
function check_txtcode(){
var val = $('#txtcode').val();
var re = /[0-9]{5,6}$/;
if(val == ''){
$('#txtcode').next().html('密码不为空');
$('#txtcode').next().show();
error_txtcode = true;
return;
}
if (re.test(val)){
error_txtcode = false;
}else{
$('#txtcode').next().html('动态验证码不正确');
$('#txtcode').next().show();
error_txtcode = true;
return;
}
}
function check_pwd(){
var val = $('#texloginPwd1').val();
var re = /^[a-zA-Z0-9@\$\*\.\!\?]{6,16}$/;
if(val == ''){
$('#texloginPwd1').next().html('密码不能为空!');
$('#texloginPwd1').next().show();
error_pwd = true;
return;
}
if(re.test(val)){
error_pwd = false;
}else{
$('#texloginPwd1').next().html('密码包含数字、字母、@$*.!?的6-16位字符');
$('#texloginPwd1').next().show();
error_pwd = true;
return;
}
}
function check_cpwd(){
var val = $('#texloginPwd1').val();
var cval = $('#texloginPwd').val();
if(val == cval){
error_cpwd = false;
}else{
$('#texloginPwd2').next().html('再次输入的密码不一致!');
$('#texloginPwd2').next().show();
error_cpwd = true;
return;
}
}
$('.form').submit(function() {
//防止用户上来就直接点提交,上面验证都未执行,所以先执行一次
check_username();
check_member();
check_txtcode();
check_pwd();
check_cpwd();
if(!(error_name == false && error_member == false && error_txtcode == false && error_pwd == false && error_cpwd == false)){
return false;
}
});
})