python Django day17

时间：2016-08-31 09:24:44 阅读：240 评论：0 收藏：0 [点我收藏+]

标签：

表单几本验证（Dom绑定）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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: 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();" />
        </form>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function CheckValid() {
            $(‘form .item 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 flag;
        }
    </script>
</body>
</html>

表单验证（jQuery绑定）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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: 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();
        });

        function BindCheckValid() {

            $(‘form :submit‘).click(function () {
                $(‘form .item 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 flag;

            });

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

jQuery each 循环

（return false 表示break）

<!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: 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>

each循环

jQueryk=扩展

a、自执行函数

b、闭包

/**
 * Created by alex on 2016/8/28.
 */

(function(jq){
    jq.extend({
        ‘dalong1‘: function(arg){
            console.log(arg);
        }
    });

    function f1(){

    }
})(jQuery);

extend1

<!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: 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>
        $.dalong1(‘123‘);


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

导入直接用

jquery扩展实现基本验证

a. 支持是否允许为空

b. 长度

c. 正则表达式

/**
 * Created by alex on 2016/8/28.
 */
(function(jq){

    function ErrorMessage(inp,message){
        var tag = document.createElement(‘span‘);
        tag.innerText = message;
        inp.after(tag);
    }

    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 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;
                        }

                        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;
                            }
                            //json.stringify()
                            //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;
                            }
                        }

                        // 1、html自定义标签属性
                        // 增加验证规则+错误提示
                    }

                });

                return flag;
            });
        }
    });
})(jQuery);

commons.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{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            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="phone" label="手机" require="true" phone="true"/>
            </div>
            <input type="submit" value="提交" />
        </form>

    </div>

    <script src="jquery-1.12.4.js"></script>
    <script src="commons.js"></script>
    <script>
        $(function(){
            $.valid(‘#form1‘);
        });


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

直接导入引用

正则表达式

1、定义正则表达式

/.../ 用于定义正则表达式
/.../g 表示全局匹配
/.../i 表示不区分大小写
/.../m 表示多行匹配
JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容)

var pattern = /^Java\w*/gm;
var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
result = pattern.exec(text)
result = pattern.exec(text)
result = pattern.exec(text)

注：定义正则表达式也可以 reg= new RegExp()

2、匹配

JavaScript中支持正则表达式，其主要提供了两个功能：

test(string) 检查字符串中是否和正则匹配

n = ‘uui99sdf‘
reg = /\d+/
reg.test(n)  ---> true
 
# 只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$

View Code

exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。

获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
 
非全局模式
    获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配）
    var pattern = /\bJava\w*\b/;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
 
    var pattern = /\b(Java)\w*\b/;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
 
全局模式
    需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕
    var pattern = /\bJava\w*\b/g;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
 
    var pattern = /\b(Java)\w*\b/g;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)

字符串中相关方法

obj.search(regexp)                   获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效)
obj.match(regexp)                    获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部
obj.replace(regexp, replacement)     替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项，
                                        $数字：匹配的第n个组内容；
                                          $&：当前匹配的内容；
                                          $`：位于匹配子串左侧的文本；
                                          $‘：位于匹配子串右侧的文本
                                          $$：直接量$符号

python Django day17

标签：

原文地址：http://www.cnblogs.com/QL8533/p/5824549.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行