jquery.validate验证表单配合回调提交和h5.storage本地保存笔记
- 表单验证插件我使用:jquery.validate.js 支持中文提示,可扩展性强!教程地址
- 本地保存状态信息使用:h5提供的storage,浏览器支持5m的存储量,存储类型必须是string类型,并且ie8以下不支持,详细介绍看大神的。
- 我使用的库文件v1.15的 密码:3sfb
简单介绍说明一下吧,但对于搬运工可能就会跳过去了,仅以此作为复习。
- jquery.validate.js是通过元素name来获取的,和id没有关系
- jquery.validate.js必须引入messages_zh.js 中文提示包
- storage是永久保存信息,比cookie存储的多,有5m容量,但是多了也卡。并且只能保存字符串类型
实例代码:
1 //结构:一个原始的表单 2 <form action="/" id="commentForm"> 3 <label for="username"> 4 用户名:<input type="text" id="username" name="username"> 5 </label> 6 <label for="password"> 7 密码:<input type="password" id="password" name="password"> 8 </label> 9 <label for="sub"> 10 <input type="submit" id="sub" name="sub" value="提交"> 11 </label> 12 </form>
1 //引入库文件 2 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 3 <script src="jquery-validation-1.15.1/dist/jquery.validate.min.js"></script> 4 <script src="jquery-validation-1.15.1/dist/localization/messages_zh.min.js"></script>
1 //验证代码 2 3 $('#sub').on('click',function () { 4 $("#commentForm").validate({ 5 onsubmit:true, //在提交时验证 6 onfocusout:false,//在得到焦点时是否验证 7 onkeyup :false,//在键盘弹起时验证 8 rules: { 9 username: { 10 required: true, 11 minlength: 2 12 }, 13 password: { 14 required: true, 15 minlength: 5 16 } 17 }, 18 messages: { 19 username: { 20 required: "<span style='color: red'>请输入用户名</span>",//只以dom形式展示可以自定义dom 21 minlength: "<span style='color: red'>用户名必需由两个字母组成</span>" 22 }, 23 password: { 24 required: "<span style='color:red'>请输入密码</span>", 25 minlength: "<span style='color:red'>密码长度不能小于 5 个字母</span>" 26 } 27 }, 28 submitHandler: function(form) { //验证成功时调用 29 //alert('ok'); 30 h5storage($('#username').val(),$('#password').val())//调用storage本地保存 31 }, 32 invalidHandler: function(form, validator) { //不通过回调 33 alert('验证不通过'); 34 return false; 35 }, 36 debug:true 37 }); 38 })
1 //为了偷懒,我就把增删查改都写出来了,因为它只接受字符串所以在使用json的时候要对json解析,同理获取的时候也要转化。 2 //h5本地存储 3 function h5storage() { 4 var uid=arguments[0],passw=arguments[1]; 5 if(!window.localStorage){ 6 alert("浏览器不支持支持localstorage"); 7 }else{ 8 //主逻辑业务 9 //1.写入 10 var storage=window.localStorage; 11 //写入a字段 12 storage["uid"]=uid; 13 //写入c字段 14 storage.setItem("passw",passw); 15 //console.log(typeof storage["passw"]+'=='+storage['passw']); 16 //console.log(typeof storage["uid"]+'=='+storage.uid); 17 //2.获取 18 //第一种方法读取 19 var a=storage.uid; 20 //console.log(a); 21 //第二种方法读取 22 var b=storage["passw"]; 23 //console.log(b); 24 //第三种方法读取 25 var c=storage.getItem("passw"); 26 //console.log(c); 27 //3.修改 28 storage.setItem("passw",333333); 29 //console.log(storage["passw"]) 30 //4.删除 31 //storage.clear();//删除全部 32 //console.log(storage.uid+'和'+storage.passw) 33 //storage.removeItem('passw')//某个键值对删除 34 //console.log(storage.uid+'和'+storage.passw) 35 36 //解析json数据传入 37 var data={ 38 name:'宋宇', 39 sex:'男', 40 hobby:'program' 41 }; 42 var d=JSON.stringify(data);//转成字符串 43 storage.setItem('data',d); 44 //获取到json字符串后转成json对象输出 45 var json=storage.getItem('data'); 46 var jsonObj=JSON.parse(json); 47 console.log(jsonObj) 48 } 49 }
呼呼~搬运代码真累啊,重在理解和运用。代码不重要,重要的是罗百吉。
http://websong.gitee.io/songyublog/