Python之Web前端：
一. jQuery表单验证
二. jQuery扩展
三. 滚动菜单
一. jQuery表单验证：
任何可以交互的站点都有输入表单，只要有可能，就应该对用户输入的数据进行验证。无论服务器后端是什么样的系统，都不愿意把时间浪费在一些无效的信息上，必须对表单数据进行校验，若有不符合规定的表单输入，应及时返回并给出相应的提示信息。
1. 表单验证的提示主要有两种实现方式：
(1)浏览器端验证：
通过浏览器的JavaScript验证，由于不需要和服务器交互，加快了响应信息的速度，提高了用户的体验，但是可能会有浏览器兼容性问题。
浏览器端验证原理图
(2)服务器端验证：
客户端提交表单到服务器端，服务器端验证通过时则返回表单信息到客户端，需要不断的与客户端交互，大大增加了服务性能和客户体验的问题。
服务器端验证原理图
(3)浏览器端和服务器端的双重验证：
在浏览器端验证的基础上增加服务器端的验证，这样既解决了用户的体验，也解决了浏览器兼容性的问题。
浏览器端和服务器端双重验证原理图
2. 表单验证的基本原理：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单验证的基本原理</title> 6 </head> 7 <body> 8 <!--表单验证的基本原理--> 9 <form> 10 <input type="submit" onclick="check()"> 11 </form> 12 <script> 13 function check(){ 14 //进行用户输入内容的验证 15 //获取from表单中所有的input，逐个检测 16 17 //继续事件的执行 return true 18 //终止后续事件 return false 19 } 20 </script> 21 </body> 22 </html>
3. 表单验证
Dom绑定验证
jQuery绑定验证
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单验证DOM</title> 6 <style> 7 .item{ 8 width: 250px; 9 height: 60px; 10 position: relative; 11 } 12 .item input{ 13 width: 200px; 14 } 15 .item span{ 16 position: absolute; 17 top: 20px; 18 left: 0px; 19 font-size: 8px; 20 background-color: indianred; 21 color: white; 22 display: inline-block; 23 width: 200px; 24 } 25 </style> 26 27 </head> 28 <body> 29 <div> 30 <form> 31 <div class="item"> 32 <input class="c1" type="text" name="username" label="用户名"/> 33 <!--<span>用户名不能为空</span>--> 34 </div> 35 <div class="item"> 36 <input class="c1" type="password" name="pwd" label="密码"/> 37 <!--<span>密码不能为空</span>--> 38 </div> 39 <input type="submit" value="提交" onclick="return CheckValid();" /> 40 </form> 41 </div> 42 <script src="博客/jquery-1.12.4.js"></script> 43 <script> 44 function CheckValid() { 45 // 找到form标签下的所有需要验证的标签 46 // $('form .cl') 查找form标签下的cl类 47 // $('form input[type="text"],form input[type="text"]') 查找form标签下的input标签type等于text或者password的标签 48 49 $('form .item span').remove();//默认将所有span标签移除 50 var flag = true;//定义全局变量 51 //循环所有需要验证的标签，获取内容。 52 $('form .c1').each(function () { 53 // 每个元素执行一次匿名函数 54 // this：循环当前的元素 55 // console.log(this,$(this)) 56 var val = $(this).val();//获取当前标签内容 57 if(val.length<=0){ //判断当前标签内容长度 58 var lable = $(this).attr('label');//定义变量获取当前标签的属性执行，这里为label属性。 59 var tag = document.createElement('span');//定义变量创建span标签 60 tag.innerText = lable + "不能为空";//获取tag(span)的文本值变量 61 $(this).after(tag); // 将添加的span标签通过after的方式添加到input的下面 62 flag = false;//结束当前循环 63 } 64 }); 65 return flag; 66 } 67 </script> 68 </body> 69 </html>