python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式

python_way day17

1、jQuery表单验证

　　dom事件绑定

　　jquery事件绑定

　　$.each return值的判断

　　jquery扩展方法

2、前段插件

3、jDango文本框架

4、正则表达式

一，jQuery:表单验证：

1、dom方法提交表单，并验证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>
        .item{
             250px;
            height: 60px;
            position: relative;
        }
        .item input{
             200px;
        }
        .item span{
            display: inline-block;
            position: absolute;
            background-color: #D5023D;
            color: white;
            top: 20px;
            left:0;
             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="提交" onclick=" return CheckText();"> <!--人为绑定一个检查事件-->
    </form>
    <script src="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{
             250px;
            height: 60px;
            position: relative;
        }
        .item input{
             200px;
        }
        .item span{
            display: inline-block;
            position: absolute;
            background-color: #D5023D;
            color: white;
            top: 20px;
            left:0;
             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="提交">
    </form>
    <script src="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知识点：

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。

二、jQuery扩展：写成模块

1、jquery 2种插件机制：

第一种：不依赖选择器直接可以使用的扩展

jQuery代码：

jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});

结果：我们就多了这两个方法

jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5

　实例：

扩展代码：

function (jq) {
    jq.extend({
        "action":function (arg) {
            console.log(arg)
        }
    })
})(jQuery);

extend.js

调取扩展代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="js/jquery-3.1.0.js"></script>    //因为扩展也是依赖jquery的，所以这里需要加载jquery
    <script src="js/extend.js"></script>　　　　　　//加载自己写的js模块
    <script>
        $.action('123')　　　　　　　　　　　　　　　　//这一种是直接可以对js对象使用方法。不需要选择器之类的。
    </script>
</body>
</html>

<script src="js/jquery-3.1.0.js"></script>
    <script>
        $.extend({   //extend是添加扩展的关键字
            action:function (arg,ths) {      // ：前面是方法名，后面一个自执行函数，
                ths.find('arg') 　　　　　　　 //这种方法如果需要选色器，就要把一个标签传进来，然后使用这个传进来的标签进行选择
　　　　　　　　　　console.log(arg);   //函数里面是这个方法的方法内容
            }
        });
        $.action('self extend'，'#form')  //这种方法可以直接调取 action 这个方法
    </script>

第二种：需要先通过选择器来执行这个自定义方法

jQuery代码：

jQuery.fn.extend({     //关键字
  check: function() {　　//check为方法名，自执行函数里面是自执行函数的方法
    return this.each(function() { this.checked = true; });         //this就代指的前面的选择器选择的内容
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

结果：这种方法我们需要先使用选择器来选定一个范围，然后再使用我们定义的方法

$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

2、闭包：

多个js扩展有可能全局变量或者函数名会有冲突的，这时候就徐亚使用闭包，来隔离这些冲突

冲突例子：

有两个extend，分别是extend1.js，extend2.js,这两个都没有闭包，他们的扩展中都调用了相同名字的函数　　

$.extend({
    action1:function () {
        f1()
    }
})
function f1() {
    console.log("extend1")
}

extend1

$.extend({
    action2:function () {
        f1()
    }
})
function f1() {
    console.log("extend2")

extend2

这两个文件中都调用了f1函数

<body>
    <script src="js/jquery-3.1.0.js"></script>
    <script src="extend2.js"></script>   //这里我们先加载了extend2
    <script src="extend1.js"></script>   //这里我们后加载了extend1所以extend1的f1函数就覆盖了extend2里面的f1函数
    <script>
        $.action1()　　　　　　　　//执行action1 
        $.action2()　　　　　　　　//执行action2
     //最后我们得到的结果都是extend1里面的f1的结果
　  </script>
</body>
</html>

解决这个问题：

/**
 * Created by han on 2016/8/30.
 */

//演变1，不封装这些函数，会导致作用域的混乱
$.extend({
    action1:function () {
        f1()
    }
})
function f1() {
    console.log("extend1")
}

//演变2 把所有的扩展都封装到函数中，然后去执行
a = function (jq) {
   //因为把这些方法都包在函数里面了，所以这里面的作用域是什么都没有，这个函数执行时，需要jquery，我们就传入jquery
    jq.extend({
        action1: function () {
            f1()
        }
    });
    function f1() {
        console.log("extend1")
    }
};
a(jQuery);//我们就传入jquery
// 这样我们就定义了一个函数，然后又让这个函数执行，如果不执行。里面的扩展方法就不会执行。


//演变3.使用自执行函数来替代上面的那个方法，更清晰
(function (jq) {
    jq.extend({
        action1: function () {
            f1()
        }
    });
    function f1() {
        console.log("extend1")
    }
})(jQuery); // （function(jg)jq接受后面括号传过来的实参）<===（jQuery这个实参）

解决的演变

演变后实例

(function (jq) {
    jq.extend({
        action1: function () {
            f1()
        }
    });
    function f1() {
        console.log("extend1")
    }
})(jQuery); // （function(jg)jq接受后面括号传过来的实参）<===（jQuery这个实参）

extend1.js

(function (jq) {
    jq.extend({
        action2: function () {
            f1()
        }
    });
    function f1() {
        console.log("extend2")
    }
})(jQuery); // （function(jg)jq接受后面括号传过来的实参）<===（jQuery这个实参）

extend2.js

 <script src="js/jquery-3.1.0.js"></script>
    <script src="extend2.js"></script>
    <script src="extend1.js"></script>
    <script>
        $.action1();
        $.action2();
    </script>

javascript

实例1：使用闭包，自定义js来执行一个输入验证。

(function(jq){
    jq.fn.extend({
        BindValid:function (form) {
            //$(this)：[ input.c1, input.c1 ]
            all_input= $(this);
            jq(form).find(':submit').click(function () {// 找到submit标签,绑定click单击事件
                jq(form).find('span').remove();  //先把上一个错误的span提示标签删除
                var flag = true;                 //定义flag一个返回变量
                jq(all_input).each(function () {  //对 [ input.c1, input.c1 ] 标签做循环
                    var val = $(this).val();      //this就是当前循环到的input标签
                    if(val.length<=0){                      //如果小于0
                        var label = $(this).attr("label");      //获取这个标签的lable内容
                        var tag = document.createElement("span");  //创建一个span标签
                        tag.innerText = label+"不能为空";           //添入一个信息
                        $(this).after(tag);                         //在这个标签下面添加新建标签
                        flag = false;                               //因为没有填写内容所以给flag赋值成flase
                        return false;   //如果有一个是false则退出整个循环，也就是只检测一个，下面的就不再检测了。效果：只显示当前不合法的报错
                    }
                });
                return flag //返回true click这个事件就让继续提交，如果返回false就停止提交并报错
            })
        }
    })
})(jQuery);

my_extend.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>
        .item{
             250px;
            height: 60px;
            position: relative;
        }
        .item input{
             200px;
        }
        .item span{
            display: inline-block;
            position: absolute;
            background-color: #D5023D;
            color: white;
            top: 20px;
            left:0;
             203px;
        }
    </style>
</head>
<body>
    <form id="form1">
        <div class="item">
            <input class="c1" type="text" name="username" label="用户名">
            <!--<span>用户名不能为空</span>-->
        </div>
        <div class="item">
            <input class="c1" type="password" name="password" label="密码">
             <!--<span>密码不能为空</span>-->
        </div >
        <input type="submit" value="提交">
    </form>
    <script src="js/jquery-3.1.0.js"></script>
    <script src="js/my_extend.js"></script>
    <script>
        //绑定时机：1、需要form这个标签创建完才能绑定
        //        2、如果有大量内容需要加载，那我们就在框架加载完绑定会快很多
        $(function () {         //所以这里就使用了function这个自执行函数，在框架加载完就执行里面的绑定的函数
            //当页面框架加载完后，自动执行

            //首先先找到.item 下面的password 和 text 这两个标签，然后使用jquery的BindValid
                $('.item :password,:text').BindValid('#form1'); //第二种jquery扩展方法，
                                                    // 在使用时将选择器匹配的标签直接传入后面的扩展jquery中
        });
    </script>
</body>
</html>

表单验证_jQ_extend.html

实例2：自定义检查内容，比如邮箱，电话类型，用户名长度，

/**
 * 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();   //delete error span tag

                var flag = true;
                jq(form).find(':text,:password').each(function(){  //loop eary text password tag

                    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'); //如果长度不符合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)){    //正则匹配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">
                <!--自定义require属性，如果为true就是需要验证不能为空，自定义属性min-len=6，用到了验证输入的长度为6-->
                <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">
                <!--自定义phone属性，如果是这个属性就是要填写手机，就要用正则去匹配内容是否为手机-->
                <input  class="c1" type="text" name="phone" label="手机" require="true" phone="true"/>
            </div>
            <input type="submit" value="提交" />
        </form>

    </div>

    <script src="js/jquery-3.1.0.js"></script>
    <script src="js/commons.js"></script>
    <script>
        $(function(){
            $.valid('#form1');      //另一种绑定事件的方法，不用使用前面的选择器
        });

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

s4.html

3、正则表达式

1、定义正则表达式

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

var pattern = /^Javaw*/gm;
var text = "JavaScript is more fun than 
JavaEE or JavaBeans!";
result = pattern.exec(text)
result = pattern.exec(text)
result = pattern.exec(text)

2、匹配

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

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

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

exec(string) 获取正则表达式匹配的所有内容，如果未匹配，值为null，否则，获取匹配成功的数组。这个数组里面的第二个元素是匹配分组的内容

获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
 
非全局模式（只匹配第一个）
    获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配）
    var pattern = /Javaw*/;   　　　　　　　　 //就是一个单词的开头和结尾
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
　　 ---> ["JavaScript"]
 
    var pattern = /(Java)w*/;    //分组匹配
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
　　 ---> ["JavaScript", "Java"] 　　 //索引的1位置就是分组匹配出来的元素
 

全局模式（循环匹配所有匹配的）
    需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕
    var pattern = /Javaw*/g;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
　　 ---> ["JavaScript"]
 　　---> ["Java"]
　　 ---> ["JavaBeans"]
　　
    var pattern = /(Java)w*/g;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
　　---> ["JavaScript", "Java"]
　　---> ["Java", "Java"]
　　---> ["JavaBeans", "Java"]

3、字符串中相关方法　

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