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

2023-11-23 03:37:53

python_way day17

1、jQuery表单验证

　　dom事件绑定

　　jquery事件绑定

　　$.each return值的判断

　　jquery扩展方法

　　

2、前段插件

3、jDango文本框架

4、正则表达式

 

 

---

一，jQuery:表单验证：

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

版本一：所有的元素一起验证

 

2、jQuery方法提交表单，验证方法：

　　这种绑定事件的好处在于在阅览器里面看不到是谁绑定的这个事件。只有js知道谁绑定了时间

版本二，jQuery绑定事件，验证表单

 

3、each知识点：

each循环

　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

 

调取扩展代码：

    //因为扩展也是依赖jquery的，所以这里需要加载jquery　　　　　　//加载自己写的js模块

　　

　　

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

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函数

   //这里我们先加载了extend2   //这里我们后加载了extend1所以extend1的f1函数就覆盖了extend2里面的f1函数

解决这个问题：

/*** 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

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){                      //如果小于0var label = $(this).attr("label");      //获取这个标签的lable内容var tag = document.createElement("span");  //创建一个span标签tag.innerText = label+"不能为空";           //添入一个信息$(this).after(tag);                         //在这个标签下面添加新建标签flag = false;                               //因为没有填写内容所以给flag赋值成flasereturn false;   //如果有一个是false则退出整个循环，也就是只检测一个，下面的就不再检测了。效果：只显示当前不合法的报错
                    }});return flag //返回true click这个事件就让继续提交，如果返回false就停止提交并报错
            })}})
})(jQuery);

my_extend.js

 

实例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 tagvar flag = true;jq(form).find(':text,:password').each(function(){  //loop eary text password tagvar 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);

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="js/jquery-3.1.0.js">script><script src="js/commons.js">script><script>$(function(){$.valid('#form1');      //另一种绑定事件的方法，不用使用前面的选择器
        });script>
body>
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个组内容；$&：当前匹配的内容；$`：位于匹配子串左侧的文本；$'：位于匹配子串右侧的文本$$：直接量$符号

转载于:https://www.cnblogs.com/python-way/p/5822497.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！