首页 > 代码库 > python_way day17 jQuery表单验证，插件，文本框架

python_way day17 jQuery表单验证，插件，文本框架

2024-08-11 08:32:38   220人阅读

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


联系
我们