jquery.validate验证表单配合回调提交和h5.storage本地保存笔记

• 表单验证插件我使用：jquery.validate.js 支持中文提示，可扩展性强！教程地址
• 本地保存状态信息使用：h5提供的storage，浏览器支持5m的存储量，存储类型必须是string类型，并且ie8以下不支持，详细介绍看大神的。
• 我使用的库文件v1.15的  密码：3sfb

简单介绍说明一下吧，但对于搬运工可能就会跳过去了，仅以此作为复习。

1. jquery.validate.js是通过元素name来获取的，和id没有关系
2. jquery.validate.js必须引入messages_zh.js 中文提示包
3. storage是永久保存信息，比cookie存储的多，有5m容量，但是多了也卡。并且只能保存字符串类型

实例代码：

//结构：一个原始的表单
<form action="/" id="commentForm">
    <label for="username">
        用户名：<input type="text" id="username" name="username">
    </label>
    <label for="password">
        密码：<input type="password" id="password" name="password">
    </label>
    <label for="sub">
        <input type="submit" id="sub" name="sub" value="提交">
    </label>
</form>

//引入库文件
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery-validation-1.15.1/dist/jquery.validate.min.js"></script>
<script src="jquery-validation-1.15.1/dist/localization/messages_zh.min.js"></script>

//验证代码

$('#sub').on('click',function () {
        $("#commentForm").validate({
            onsubmit:true, //在提交时验证
            onfocusout:false,//在得到焦点时是否验证
            onkeyup :false,//在键盘弹起时验证
            rules: {
                username: {
                    required: true,
                    minlength: 2
                },
                password: {
                    required: true,
                    minlength: 5
                }
            },
            messages: {
                username: {
                    required: "<span style='color: red'>请输入用户名</span>",//只以dom形式展示可以自定义dom
                    minlength: "<span style='color: red'>用户名必需由两个字母组成</span>"
                },
                password: {
                    required: "<span style='color:red'>请输入密码</span>",
                    minlength: "<span style='color:red'>密码长度不能小于 5 个字母</span>"
                }
            },
            submitHandler: function(form) { //验证成功时调用
                //alert('ok');
                h5storage($('#username').val(),$('#password').val())//调用storage本地保存
            },
            invalidHandler: function(form, validator) {  //不通过回调
                alert('验证不通过');
                return false;
            },
            debug:true
        });
    })

//为了偷懒，我就把增删查改都写出来了，因为它只接受字符串所以在使用json的时候要对json解析，同理获取的时候也要转化。
//h5本地存储
    function h5storage() {
        var uid=arguments[0],passw=arguments[1];
        if(!window.localStorage){
            alert("浏览器不支持支持localstorage");
        }else{
            //主逻辑业务
            //1.写入
            var storage=window.localStorage;
            //写入a字段
            storage["uid"]=uid;
            //写入c字段
            storage.setItem("passw",passw);
            //console.log(typeof storage["passw"]+'=='+storage['passw']);
            //console.log(typeof storage["uid"]+'=='+storage.uid);
            //2.获取
            //第一种方法读取
            var a=storage.uid;
            //console.log(a);
            //第二种方法读取
            var b=storage["passw"];
            //console.log(b);
            //第三种方法读取
            var c=storage.getItem("passw");
            //console.log(c);
            //3.修改
            storage.setItem("passw",333333);
            //console.log(storage["passw"])
            //4.删除
            //storage.clear();//删除全部
            //console.log(storage.uid+'和'+storage.passw)
            //storage.removeItem('passw')//某个键值对删除
            //console.log(storage.uid+'和'+storage.passw)

            //解析json数据传入
            var data={
                name:'宋宇',
                sex:'男',
                hobby:'program'
            };
            var d=JSON.stringify(data);//转成字符串
            storage.setItem('data',d);
            //获取到json字符串后转成json对象输出
            var json=storage.getItem('data');
            var jsonObj=JSON.parse(json);
            console.log(jsonObj)
        }
    }

呼呼~搬运代码真累啊，重在理解和运用。代码不重要，重要的是罗百吉。