标签：
Python之Web前端：
一. jQuery表单验证
二. jQuery扩展
三. 滚动菜单
一. jQuery表单验证：
以下表单验证使用两种方式简单实现：
(一). 使用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‘); 59 var tag = document.createElement(‘span‘); 60 tag.innerText = lable + "不能为空"; 61 $(this).after(tag); // 将添加的span标签通过after的方式添加到input的下面 62 flag = false; 63 } 64 }); 65 return flag; 66 } 67 </script> 68 </body> 69 </html>
标签：
原文地址：http://www.cnblogs.com/python-nameless/p/5819176.html
