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>
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);
调取扩展代码：
<!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") }
$.extend({ action2:function () { f1() } }) function f1() { console.log("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这个实参）
(function (jq) { jq.extend({ action2: function () { f1() } }); function f1() { console.log("extend2") } })(jQuery); // （function(jg)jq接受后面括号传过来的实参）<===（jQuery这个实参）
<script src="js/jquery-3.1.0.js"></script>
<script src="extend2.js"></script>
<script src="extend1.js"></script>
<script>
$.action1();
$.action2();
</script>
实例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);
<!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>
实例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);
<!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>
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表单验证，插件，文本框架的主要内容，如果未能解决你的问题，请参考以下文章