Python菜鸟之路：通过案例学习JQuery
案例一：通过DOM绑定，实现基本的表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证: DOM实现</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>
<div class="item">
<input class="c1" type="text" name="username" label="用户名"/>
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码"/>
</div>
<input type="submit" value="提交" onclick="return CheckValid();" /> <!--DOM绑定click事件 -->
</form>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
var flag = true; function CheckValid() {
$('form .item span').remove();
$('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 flag;
}
</script>
</body>
</html>
DOM实现表单验证
案例二：通过JQuery事件绑定，实现基本的表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证:JS绑定事件</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>
<div class="item">
<input class="c1" type="text" name="username" label="用户名"/>
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码"/>
</div>
<input type="submit" value="提交"/>
</form>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
BindCheckValid();
});
// 页面加载完之后，进行绑定事件
function BindCheckValid() {
$('form :submit').click(function () {
var flag = true;
$('form .item span').remove();
$('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 flag;
});
}
</script>
</body>
</html>
JS实现表单验证
案例三：通过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="jquery-1.12.4.js"></script>
<script src="commons.js"></script>
<script>
$(function(){
$.valid('#form1');
}); </script>
</body>
</html>
HTML部分
/**
* Created by ACER 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(); var flag = true;
jq(form).find(':text,:password').each(function(){ 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');
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)){
var label = $(this).attr('label');
ErrorMessage($(this),label + "格式错误");
flag = false;
return false;
}
} // 1、html自定义标签属性
// 增加验证规则+错误提示 }
// 每一个元素执行次匿名函数
// this
//console.log(this,$(this));
/*
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;
}
*/
}); return flag;
});
}
});
})(jQuery);
JS部分
Python菜鸟之路：通过案例学习JQuery的更多相关文章
- Python菜鸟之路：原生Ajax/Jquery Ajax/IFrame Ajax的选用
原生Ajax Jquery Ajax IFrame Ajax 如果发送的是普通的数据,比如用户简单的输入.选择的值,推荐使用Jquery ,其次用XMLHttpRquest对象,最次使用IFrame ...
- Python菜鸟之路：Django 路由补充1：FBV和CBV - 补充2：url默认参数
一.FBV和CBV 在Python菜鸟之路:Django 路由.模板.Model(ORM)一节中,已经介绍了几种路由的写法及对应关系,那种写法可以称之为FBV: function base view ...
- Python菜鸟之路：JQuery基础
前言 JQuery可以理解为是一个模块,里边封装了DOM以及JavaScript,可以方便的对JQuery对象进行操作. 版本 尽量选择1.X系统的Jquery版本,例如1.12.jquery.js. ...
- Python菜鸟之路：Jquery Ajax的使用
Ajax概述 Ajax就是通过 HTTP 请求加载远程数据.通常用于定制一些http请求来灵活的完成前端与后端的数据交互需求. 注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置. J ...
- Python菜鸟之路：JavaScript基础
前言 JavaScript 是属于网络的脚本语言,被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用. 编写 1. 存在形式 方式一:存在js文件中,即写入js文件 ...
- Python菜鸟之路：前端HTML基础
前面的章节中,Python的基本知识已经差不多介绍完了.本节介绍HTML相关的知识.需要着重声明的是,前端知识是非常非常重要的知识,以我实际项目经验来看,一个项目的瓶颈在设计和前端.设计就先不说了,前 ...
- Python菜鸟之路：Python基础-线程、进程、协程
上节内容,简单的介绍了线程和进程,并且介绍了Python中的GIL机制.本节详细介绍线程.进程以及协程的概念及实现. 线程 基本使用 方法1: 创建一个threading.Thread对象,在它的初始 ...
- Python菜鸟之路：Python基础-类（2）——成员、成员修饰符、异常及其他
三大成员 在Python的面向对象中,主要包括三大成员:字段.方法.属性 字段 类成员的字段又可分为普通字段.静态字段,他们在定义和使用中有所区别,而最本质的区别是内存中保存的位置不同,代码示例如下: ...
- Python菜鸟之路：Python基础-模块
什么是模块? 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护.为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,分组的规则就是把实现了某个 ...
随机推荐
- java学习路线-Java技术人员之路从0基础到高级
满满的 全是干货 java基础: 尚学堂 马士兵 个人推荐 历经5年锤练--史上最适合刚開始学习的人入门的Java基础视频 很具体 适合 时间多的看 传智播客java基础班 马士兵线程 ...
- Linux----LVM扩容磁盘空间(讲的也很好)
转:https://www.cnblogs.com/tail-f/p/6143085.html
- robot.txt 文件 作用和语法
seo工作者应该不陌生,robots.txt文件是每一个搜索引擎蜘蛛到你的网站之后要寻找和访问的第一个文件,robots.txt是你对搜索引擎制定的一个如何索引你的网站的规则.通过该文件,搜索引擎就可 ...
- NIO之Channel聚集(gather)写入与分散(scatter)读取
Channel聚集(gather)写入 聚集写入( Gathering Writes)是指将多个 Buffer 中的数据“聚集”到 Channel. 特别注意:按照缓冲区的顺序,写入 position ...
- Xilinx FPGA 学习笔记
一.时序设计 方法1.通过状态机来实现,通过verilog控制FPGA,让它该快的时候快,该慢的时候慢. 方法2.FPGA中运行CPU 把逻辑控制顺序复杂的事情用C代码来实现,而实时处理部分用veri ...
- javascript消息框
JavaScript有三种消息框: 警告框:alert() alert("我是警告框!!") 确认框:confirm() function show_confirm() { var ...
- Lua顺序 执行顺序
1.4.2. Lua顺序 Nginx下Lua处理阶段与使用范围: init_by_lua http set_by_lua server, server if, location, location i ...
- html 标签 链接
<a href="http://www.baidu.com">百度</a> <a href="#here">here< ...
- Blackey win10 + python3.6 + VSCode + tensorflow-gpu + keras + cuda8 + cuDN6N环境配置（转载）
win10 + python3.6 + VSCode + tensorflow-gpu + keras + cuda8 + cuDN6N环境配置 写在前面的话: 再弄这个之前,我对python也好 ...
- Java并发编程（六）发布与逸出
"发布(Publish)"一个对象的意思指,使对象能够在作用域之外的代码中使用. 例如: 将一个指向该对象的引用保存到其他代码可以访问的地方 在一个非私有的方法中返回该引用 将引用 ...