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

Posted wawahan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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{
            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="提交" 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{
            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="提交">
    </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{
            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 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 = /^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)

  

2、匹配

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

  • test(string)     检查字符串中是否和正则匹配
n = \'uui99sdf\'
reg = /\\d+/
reg.test(n)  ---> true
 
# 只要正则在字符串中存在就匹配,如果想要开头和结尾匹配的话,就需要在正则前后加 ^和$
  • exec(string)    获取正则表达式匹配的所有内容,如果未匹配,值为null,否则,获取匹配成功的数组。这个数组里面的第二个元素是匹配分组的内容
获取正则表达式匹配的内容,如果未匹配,值为null,否则,获取匹配成功的数组。
 
非全局模式(只匹配第一个)
    获取匹配结果数组,注意:第一个元素是第一个匹配的结果,后面元素是正则子匹配(正则内容分组匹配)
    var pattern = /\\bJava\\w*\\b/;            //\\b就是一个单词的开头和结尾
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
   ---> ["JavaScript"] var pattern = /\\b(Java)\\w*\\b/; //分组匹配 var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text)
   ---> ["JavaScript", "Java"]    //索引的1位置就是分组匹配出来的元素
全局模式(循环匹配所有匹配的) 需要反复调用exec方法,来一个一个获取结果,直到匹配获取结果为null表示获取完毕 var pattern = /\\bJava\\w*\\b/g; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text)
   ---> ["JavaScript"]   ---> ["Java"]
   ---> ["JavaBeans"]
   var pattern = /\\b(Java)\\w*\\b/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个组内容;
                                          $&:当前匹配的内容;
                                          $`:位于匹配子串左侧的文本;
                                          $\':位于匹配子串右侧的文本
                                          $$:直接量$符号

  

 

以上是关于python_way day17 jQuery表单验证,插件,文本框架的主要内容,如果未能解决你的问题,请参考以下文章

python_way day14 HTML-day5 (form表单验证,)

python_way day16 JQuary

python_way,day3

python_way,day4

python_way ,day22 tonardo

python_way ,day25 wmi