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表单验证，事件绑定，插件，文本框架，正则表达式的更多相关文章
- 【jquery】Validform，一款不错的 jquery 表单验证插件
关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...
- jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- jquery表单验证使用插件formValidator
JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- jQuery表单验证以及将表单序列化为json对象小练习
jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...
- JQuery 表单验证--jquery validation
jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...
- jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
- jquery 表单验证插件
其他: <form action=""> First name: <input type="text" name="FirstNam ...
随机推荐
- STM32模拟I2C
之前为了测试, 拿最小板做了一个I2C的主发跟主读, 一开始当然是尝试用硬件I2C, 结果弄了很久, 时间紧迫, 只好用了模拟, 结果发现, 哎, 真特么挺好用的, 现在1片儿顶过去5片儿. 硬件I2 ...
- C#（winform）浏览按钮
FolderBrowserDialog folderBrowser = new FolderBrowserDialog(); //folderBrowser.SelectedPa ...
- Unicode : RLO
分类:备忘,Unicode,Perl 我们一般的输入文字的方向是从左往右,但是世界上总有特例,阿拉伯国家是从右到左的书写方式.经常看到微信里面好友得瑟,也就拿过来总结一下. 每个语言都能实现字符串反转 ...
- linux用户栈内核栈的设置---进程的创建: fork/execve【转】
转自:http://blog.csdn.net/u011279649/article/details/18795547 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 应用层怎 ...
- c#使用word、excel、pdf ——转
一.C# Word操作引入Word COM组件菜单=>项目=>添加引用=>COM=>Microsoft Word 11.0 Object Libraryusing Word = ...
- Apache Mina 入门实例
这个教程是介绍使用Mina搭建基础示例.这个教程内容是以创建一个时间服务器. 以下是这个教程需要准备的东西: MINA 2.0.7 Core JDK 1.5 或更高 SLF4J 1.3.0 或更高 L ...
- mysql 段错误 (core dumped)
一直使用好好的mysql命令,突然今天抽风,无论使用任何mysql选项都报“段错误 (core dumped)”,以为是mysqld程序出问题了,所以我尝试重启,因为我的环境上是多实例,用了mysql ...
- ACM题目————星际之门（一）
描述 公元3000年,子虚帝国统领着N个星系,原先它们是靠近光束飞船来进行旅行的,近来,X博士发明了星际之门,它利用虫洞技术,一条虫洞可以连通任意的两个星系,使人们不必再待待便可立刻到达目的地. 帝国 ...
- JavaScript DOM 编程艺术（第2版）读书笔记（5）
最佳实践 平稳退化 网站的访问者完全有可能使用的是不支持Javascript的浏览器,还有一种可能是虽然浏览器支持Javascript,但用户已经禁用它了.如果没有考虑到这种情况,人们在访问你们的网站 ...
- Linux hrtimer分析（2）
http://blog.csdn.net/angle_birds/article/details/17375901 本文介绍Linux2.6.29中,配置高精度模式的hrtimer与未配置高精度模式时 ...