首页 > 代码库 > Python之Web前端jQuery扩展
Python之Web前端jQuery扩展
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 // this55 // 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>
Python之Web前端jQuery扩展
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。