首页 > 代码库 > python_way day17 jQuery表单验证,插件,文本框架
python_way day17 jQuery表单验证,插件,文本框架
python_way day17
jQuery表单验证
dom事件绑定
jquery时间绑定
$.each return值的判断
jquery扩展方法
前段插件
jDango文本框架
一,jQuery:表单验证:
1、dom方法提交表单,并验证:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单验证</title> <style> .item{ width: 250px; height: 60px; position: relative; } .item input{ width: 200px; } .item span{ display: inline-block; position: absolute; background-color: #D5023D; color: white; top: 20px; left:0; width: 203px; } </style></head><body> <form> <div class="item"> <input class="c1" type="text" name="username" label="用户名"> <!--<span>用户名不能为空</span>--> </div> <div class="item"> <input class="c1" type="password" name="username" label="密码"> <!--<span>密码不能为空</span>--> <!--预先做测试使用,以后的效果就是让javascript往这里添加这个标签--> </div > <input type="submit" value="http://www.mamicode.com/提交" onclick=" return CheckText();"> <!--人为绑定一个检查事件--> </form> <script src="http://www.mamicode.com/js/jquery-3.1.0.js"></script> <script> function CheckText() { $(‘form span‘).remove(); var flag = true; $(‘form .c1‘).each(function () { //找到form标签中需要验证的标签 var val = $(this).val(); //获取input中的val if(val.length<=0){ var label = $(this).attr("label"); var tag = document.createElement("span"); tag.innerText = label+"不能为空"; $(this).after(tag); //把标签添加到这个标签的后面 flag = false; //判断当前这个标签的内容如果是空就把flag制成false,不为空就不管了,让他是true, } }); return flag; //最后这个函数就可以return这个flag了,如果是true就可以提交表单,如果时候false就不提交 } </script></body></html>
2、jQuery方法提交表单,验证方法:
这种绑定事件的好处在于在阅览器里面看不到是谁绑定的这个事件。只有js知道谁绑定了时间
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单验证</title> <style> .item{ width: 250px; height: 60px; position: relative; } .item input{ width: 200px; } .item span{ display: inline-block; position: absolute; background-color: #D5023D; color: white; top: 20px; left:0; width: 203px; } </style></head><body> <form> <div class="item"> <input class="c1" type="text" name="username" label="用户名"> <!--<span>用户名不能为空</span>--> </div> <div class="item"> <input class="c1" type="password" name="username" label="密码"> <!--<span>密码不能为空</span>--> </div > <input type="submit" value="http://www.mamicode.com/提交"> </form> <script src="http://www.mamicode.com/js/jquery-3.1.0.js"></script> <script> //绑定时机:1、需要form这个标签创建完才能绑定 // 2、如果有大量内容需要加载,那我们就在框架加载完绑定会快很多 $(function () { //所以这里就使用了function这个自执行函数,在框架加载完就执行里面的绑定的函数 //当页面框架加载完后,自动执行 BindCheckValid(); }); function BindCheckValid() { $(‘form input:submit‘).click(function () { $(‘form span‘).remove(); var flag = true; $(‘form .c1‘).each(function () { var val = $(this).val(); if(val.length<=0){ var label = $(this).attr("label"); var tag = document.createElement("span"); tag.innerText = label+"不能为空"; $(this).after(tag); flag = false; return false; //如果有一个是false则退出整个循环,也就是只检测一个,下面的就不再检测了。效果:只显示当前不合法的报错 } }); return flag; //这里return false 就表示不再提交了,这里和dom "return BindCheckValid()"的reutrn false 是一个道理 }) } </script></body></html>
3、知识点:
each循环
<script> $.each([11,22,33,44], function (k, v) { if(k==2){
return; //这里的reuturn只是相当与return了当前这个function匿名函数,这个each的循环没有结束// return false; //我们如果想结束整个循环,需要写上return false ,each会判断你的reuturn,如果等于false就结束当前循环
} console.log(v) })</script>
return:相当于continue。
return false:相当于break。
python_way day17 jQuery表单验证,插件,文本框架
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。