首页 > 代码库 > 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>
版本二,jQuery绑定事件,验证表单

 

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表单验证,插件,文本框架