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)
         }
     }

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