Day17 表单验证、滚动菜单、Django

一、表单验证的两种实现方式

1、DOM绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证(DOM绑定)</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: red;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>
    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名" />
                <!--<span>用户名不能为空</span>-->
            </div>
            <div class="item">
                <input class="c1" type="password" name="pwd" label="密码" />
                <!--<span>密码不能为空</span>-->
            </div>
            <input type="submit" value="提交" onclick="return CheckValid();" />
             <!--<input type="submit" value="提交" />-->
        </form>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function CheckValid() {
            //找到form标签下的所有需要验证的标签
            //$(‘form .c1‘)
            //$(‘form input[type="text"],form input[type="password"]‘)
            //循环所有需要验证的标签，获取内容
            //移除错误提示
            $(‘form .item span‘).remove();
            var flag = true;
            $(‘form .c1‘).each(function () {
                //每一个元素执行一次匿名函数
                //this：当前元素
                //console.log(this,$(this));
                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 flag;
        }
    </script>
</body>
</html>

2、jQuery绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证(jQuery绑定)</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: red;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>
    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名" />
                <!--<span>用户名不能为空</span>-->
            </div>
            <div class="item">
                <input class="c1" type="password" name="pwd" label="密码" />
                <!--<span>密码不能为空</span>-->
            </div>
            <input type="submit" value="提交" />
        </form>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function(){
            //当页面加载完成后自动执行
            BindCheckValid();
        });

        function BindCheckValid() {
            $(‘form :submit‘).click(function() {
                //只要点击submit按钮，执行此处内容，找到form标签下的所有需要验证的标签
                $(‘form .item span‘).remove();
                var flag = true;
                $(‘form .c1‘).each(function () {
                    //每一个元素执行一次匿名函数
                    //this：当前元素
                    //console.log(this,$(this));
                    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;
                    }
                });
                return flag;
            });
        }
    </script>
</body>
</html>

二、jQuery补充

1、jQuery中each返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中each返回值</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>

    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名"/>
                <!--<span>用户名不能为空</span>-->
            </div>
            <div class="item">
                <input  class="c1" type="password" name="pwd" label="密码"/>
                <!--<span>密码不能为空</span>-->
            </div>
            <!--<input type="submit" value="提交" onclick="return CheckValid();" />-->
            <input type="submit" value="提交" />
        </form>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>

        function BindCheckValid(){

            $.each([11,22,33,44],function(k,v){
                if(v == 22){
                    //return ; // continue
                    return false; //break
                }
                console.log(v);
            })
        }

        BindCheckValid();

    </script>
</body>
</html>

2、jQuery扩展

扩展1：

extend1.js

/**
 * Created by WangHuafeng on 2016/10/15.
 */
(function (jq) {
    jq.extend({
        ‘radar‘ : function (arg) {
            console.log(arg);
        }
    });
    function f1() {

    }
})(jQuery);
//1、自执行；2、闭包
/*
a = function (jq) {
    //调用时没有选择器
    jq.extend({
        ‘radar‘ : function (arg) {
            console.log(arg);
        }
    });
    function f1() {

    }
};
a(jQuery);
    */

extend1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery扩展1</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>

    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名"/>
                <!--<span>用户名不能为空</span>-->
            </div>
            <div class="item">
                <input  class="c1" type="password" name="pwd" label="密码"/>
                <!--<span>密码不能为空</span>-->
            </div>
            <!--<input type="submit" value="提交" onclick="return CheckValid();" />-->
            <input type="submit" value="提交" />
        </form>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script src="extend1.js"></script>
    <script>
        $.radar(‘welcome radar 扩展1‘);
    </script>
</body>
</html>

扩展2：

extend2.js

/**
 * Created by WangHuafeng on 2016/10/15.
 */

(function (jq) {
    //调用的时候可以有选择器
    $.fn.extend({
        ‘radar1‘ : function (arg) {
            //this：代指前面的选择器
            console.log(arg);
        }
    });
    function f2() {

    }
})(jQuery);

/*
b = function () {
    //调用的时候可以有选择器
    $.fn.extend({
        ‘radar1‘ : function (arg) {
            //this：代指前面的选择器
            console.log(arg);
        }
    });
    function f2() {

    }
};
b(jQuery);
*/

extend2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery扩展2</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>

    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名"/>
                <!--<span>用户名不能为空</span>-->
            </div>
            <div class="item">
                <input  class="c1" type="password" name="pwd" label="密码"/>
                <!--<span>密码不能为空</span>-->
            </div>
            <!--<input type="submit" value="提交" onclick="return CheckValid();" />-->
            <input type="submit" value="提交" />
        </form>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script src="extend2.js"></script>
    <script>
        $(‘form‘).radar1(‘welcome radar1 扩展2‘);
    </script>
</body>
</html>

3、表单验证jQuery扩展

commons.js

/**
 * Created by WangHuafeng on 2016/10/15.
 */
(function (jq) {
    jq.extend({
        valid:function (form) {
            //#form1    $(‘#form1‘)
            jq(form).find(‘:submit‘).click(function () {
                jq(form).find(‘.item span‘).remove();
                var flag = true;
                jq(form).find(‘:text,:password‘).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;//相当于break
                    }
                });
                return flag;
            });
        }
    });
})(jQuery);

j1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证(jQuery扩展)</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: red;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>
    <div>
        <form id="form1">
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名" />
            </div>
            <div class="item">
                <input class="c1" type="password" name="pwd" label="密码" />
            </div>
            <input type="submit" value="提交" />
        </form>
        <form id="form2">
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名" />
            </div>
            <div class="item">
                <input class="c1" type="password" name="pwd" label="密码" />
            </div>
            <input type="submit" value="提交" />
        </form>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script src="commons.js"></script>
    <script>
        $(function () {
            $.valid(‘#form1‘);
            //valid:$(‘#form1‘)
        });
    </script>
</body>
</html>

4、表单验证自定义属性

commons2.js

/**
 * Created by WangHuafeng on 2016/10/15.
 */
(function (jq) {
    function ErrorMessage(inp,message) {
        var tag = document.createElement(‘span‘);
        tag.innerText = message;
        inp.after(tag);
    }
    jq.extend({
        valid:function (form) {
            jq(form).find(‘:submit‘).click(function () {
                jq(form).find(‘.item span‘).remove();
                var flag = true;
                jq(form).find(‘:text,:password‘).each(function () {

                    var require = $(this).attr(‘require‘);
                    if(require){
                        var val = $(this).val();
                        if (val.length <= 0) {
                            var label = $(this).attr(‘label‘);
                            ErrorMessage($(this),label + "不能为空");
                            flag = false;
                            return false;//相当于break
                        }
                        var minLen = $(this).attr(‘min-len‘);
                        if(minLen){
                            var minLenInt = parseInt(minLen);
                            if(val.length<minLenInt){
                                var label = $(this).attr(‘label‘);
                                ErrorMessage($(this),label + "最小长度为"+ minLen);
                                flag = false;
                                return false;//相当于break
                            }
                            //json.stringfy()
                            //JSON.parse()  字典转换为字符串
                        }
                        var phone = $(this).attr(‘phone‘);
                        if(phone){
                            //用户输入内容是否为手机号码格式
                            var phoneReg = /^1[3|5|8]\d{9}$/;
                            if(!phoneReg.test(val)){
                                var label = $(this).attr(‘label‘);
                                ErrorMessage($(this),label + "格式错误");
                                flag = false;
                                return false;//相当于break
                            }
                        }
                        //自定义标签格式
                        //验证
                    }
                });
                return flag;
            });
        }
    });
})(jQuery);

j2.html

<!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{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: red;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>
    <div>
        <form id="form1">
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名" require="true" min-len="6" />
            </div>
            <div class="item">
                <input class="c1" type="password" name="pwd" label="密码" />
            </div>
            <div class="item">
                <input class="c1" type="text" name="tel" label="手机号码" require="true" phone="true" />
            </div>
            <input type="submit" value="提交" />
        </form>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script src="commons2.js"></script>
    <script>
        $(function () {
            $.valid(‘#form1‘);
            //valid:$(‘#form1‘)
        });
    </script>
</body>
</html>

三、滚动菜单

scroll_menu.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        body{
            margin: 0px;
        }
        img {
            border: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .wrap{
            width: 980px;
            margin: 0 auto;
        }

        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        .pg-header .logo{
            float: left;
            padding:5px 10px 5px 0px;
        }
        .pg-header .logo img{
            vertical-align: middle;
            width: 110px;
            height: 40px;

        }
        .pg-header .nav{
            line-height: 50px;
        }
        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: #ccc;
            padding: 0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        .pg-body{

        }
        .pg-body .catalog{
            position: absolute;
            top:60px;
            width: 200px;
            background-color: #fafafa;
            bottom: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }

        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }

        .pg-body .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
        }
    </style>
</head>
<body>

    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="#">
                    <img src="">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="#">首页</a>
                    </li>
                    <li>
                        <a  href="#">功能一</a>
                    </li>
                    <li>
                        <a  href="#">功能二</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <div class="pg-body">
        <div class="wrap">
            <div class="catalog">
                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
                <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
            </div>

            <div class="content">
                <div menu="function1" class="section" style=‘background-color:green;‘>
                    <h1>第一章</h1>
                </div>
                <div menu="function2" class="section" style=‘background-color:yellow;‘>
                    <h1>第二章</h1>
                </div>
                <div menu="function3" class="section" style=‘background-color:red;‘>
                    <h1>第三章</h1>
                </div>
            </div>
        </div>

    </div>

    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">

        $(function(){
            // 自动执行
            Init();
        });

        function Init(){

            $(window).scroll(function() {
                // 监听窗口滚动事件

                // 获取滚动条高度
                var scrollTop = $(window).scrollTop();

                // 当滚动到50像素时，左侧带菜单固定
                if(scrollTop > 50){
                    $(‘.catalog‘).addClass(‘fixed‘);
                }else{
                    $(‘.catalog‘).children().removeClass(‘active‘);
                    $(‘.catalog‘).removeClass(‘fixed‘);
                }

                // 循环所有的内容
                $(‘.content‘).children().each(function(){
                    // 当前标签距离顶部高度
                    var offSet = $(this).offset(); // 高度，左边有多远
                    // offSet.top
                    // offSet.left

                    // 自身高度
                    var height = $(this).height();

                    //offSet<滚动高度<offSet+height

                    // 当前内容位于用户阅览区
                    if(scrollTop>offSet.top && scrollTop< offSet.top + height){
                        // $(this) 当前内容标签
                        /*
                        var target = $(this).attr(‘menu‘);
                        $(‘.catalog‘).find(‘div[auto-to="‘+target+‘"]‘).addClass(‘active‘).siblings().removeClass(‘active‘);
                        return false;
                        */

                        var docHeight = $(document).height();
                        var winHeight = $(window).height();
                        // 如果，滚轮到达底部，则显示最后一个菜单
                        if(docHeight == winHeight+scrollTop)
                        {
                            $(‘.catalog‘).find(‘div:last-child‘).addClass(‘active‘).siblings().removeClass(‘active‘);
                        }else{
                            var target = $(this).attr(‘menu‘);
                            $(‘.catalog‘).find(‘div[auto-to="‘+target+‘"]‘).addClass(‘active‘).siblings().removeClass(‘active‘);
                        }
                        return false;

                    }
                });

            });

        }

    </script>
</body>
</html>

总结：

jQuery示例：
    表单验证，jQuery扩展
    1、回顾基础内容

    2、dom事件绑定

    3、jquery事件绑定

    4、$.each     return false 表示break;

    5、jquery扩展方法：
        两种方式：

    6、自定义jQuery扩展的正确方法：
        a. 自执行
        b. 闭包

    7、jquery扩展实现基本验证

        a. 支持是否允许为空

        b. 长度

        c. 正则表达式
            定义正则表达式
                reg = /正则表达式/  *****
                g
                i
                m ==> 特殊

            利用正则匹配
                reg.test(字符串)   *****
                reg.exec(字符串)
                    全局
                    非全局
            字符串三个方法：
                search
                match
                replace
                    -- 特殊符号

    滚动菜单
        页面布局（absolute）
        监听滚动事件：
            如果滚动>60,菜单固定
            如果滚动<60,菜单固定取消

前端插件：
    fontawsome

    easyui
    jqueryui
    bootstrap
    -- 引入css

    -- 引入jQuery（2.x，1.12）
    -- 引入js

    -- bootstrap模版

    bxslider
    jquery.lazyload

时间： 2024-08-07 08:35:57

Day17 表单验证、滚动菜单、Django的相关文章

python_way day14 HTML-day5 （form表单验证，）

python-way day19 1. dJango的form表单验证 一,django表单验证功能 1.django验证基础: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>django form</title> </head> <body> <div> <i

17.Django表单验证

Django提供了3中方式来验证表单 官网文档:https://docs.djangoproject.com/en/1.9/ref/validators 1.表单字段验证器 a.引入:from django.core.exceptions import ValidationError b.定义验证方法,验证不通过抛一个ValidationError异常 def validate_name(value): 验证不通过 raise ValidationError("%s的信息已经存在"%v

django之form表单验证

django中的Form一般有两种功能: 输入html 验证用户输入 #!/usr/bin/env python # -*- coding:utf-8 -*- import re from django import forms from django.core.exceptions import ValidationError def mobile_validate(value): mobile_re = re.compile(r'^(13[0-9]|15[012356789]|17[678]

Python菜鸟之路：Django 表单验证

前言 Django中完成表单验证,常用的有两种方法: 一种是通过HTML + JS + Ajax实现. 另一种是通过Django自身的forms模块来生成相应个HTML标签来完成表单验证.这是本节着重讲的地方 第一种方法:html + ajax实现基本的login页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

Python自动化运维系列之Django Form表单验证

Form表单验证 Django核心功能组件之一,虽然也可以在前端使用JS对表单验证, 但是Django中已经为我们准备好的Form功能还算是很强大的,有时候比较适合运维,为我们简化了很多前端开发工作. Django最主要的几个功能有4个     ·  生成HTML标签     ·  验证数据(表单错误信息提示)     ·  HTML 表单保留上次提交数据     ·  初始化页面表单内容 Django的Form内容还是挺多的,我们可以从一个简单的登陆验证例子来看看Form的基本功能使用 1)新

Django基础之Form表单验证

Form表单验证 1.创建Form类(本质就是正则表达式的集合) from django.forms import Form from django.forms import fields from django.forms import widgets from Mybbs.models import * import re class UserForm(Form): username = fields.CharField( required=True, error_messages={'re

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>表单验证</ti

Django之表单验证

对于前端的表单进行验证的方法,从最简单的js到基于XML传输的Ajax,再到cookie的免认证,现在Django为我们提供了自带的表单验证方法. views.py: from django import forms class FM(forms.Form): #这里要接受后端需要的,不需要的数据不会关注 required='不能为空' username=forms.CharField(error_messages={'required':required}) #表单中的name要与变量名一样

Django中的Form表单验证

回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错误信息的字典,并会遍历类的所有属性(对应前端待验证的输入域),调用各自的验证方法,将错误信息(两类,必要与否以及格式正确与否)存入字典,并得出最终的验证结果.在使用时,需要定义继承自Form基类不同的Form类,以对应有着不同输入域的Form表单.在拿到前端给的字典前,要先初始化自定义From类,直