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基础-模块
什么是模块? 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护.为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,分组的规则就是把实现了某个 ...
随机推荐
- jQuery控制form表单元素聚焦
CreateTime--2017年5月28日08:57:16Author:Marydon jQuery使form表单的第一个文本框聚焦 /** * 使form表单的第一个文本框聚焦 */ func ...
- Tabs or Spaces?
Never mix tabs and spaces. The most popular way of indenting Python is with spaces only. The second- ...
- Oracle 存储过程调用返回游标的另一个存储过程。
一个扩展存储过程调用另一个存储过程,示例: 被调用存储过程:最后会返回一个游标,游标返回一个值.调用这个存储过程的存储过程同样需要获取它. procedure SearchBill --根据到货单号查 ...
- android开发全然退出activity
我们退出Activity能够调用:finish(),system(0),可是这些都仅仅是单单退出单个Activity 也有人会说,直接把进程杀死,这些做法都不是非常可取.事实上我们翻看api能够发现. ...
- VIM-不常用或不知道的技巧
cc 清除一行 并在本行编辑, 同理 cw :32,65d 多行删除 g/pattern/d 删除包含特定字符的行 v/pattern/d 删除不包含指定字符的行 等同于 g!/pattern/d y ...
- hive 用户订单行为 基础操作
今天用hive查询用户日志表.这是日志表的格式: user_id,item_id,cat_id,merchant_id,brand_id,month,day,action,age_range,gend ...
- UDP与TCP报文格式，字段意义
UDP报文 1.UDP有两个字段:数据字段和首部字段. 首部字段 首部字段很简单,只有8个字节,由4个字段组成,每个字段的长度都是两个字节. 1)源端口:源端口号.在需要对方回信时选用.不需要时可 ...
- 【Akka】在并发程序中使用Future
引言 在Akka中, 一个Future是用来获取某个并发操作的结果的数据结构.这个操作一般是由Actor运行或由Dispatcher直接运行的. 这个结果能够以同步(堵塞)或异步(非堵塞)的方式訪问. ...
- 网页CSS font-size使用em替代px
px和em都是长度单位,区别是,px的值是固定的,em的值是相对的,并且em会继承父级元素的字体大小. 任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么12px ...
- Java 实现单链表反序
//单链表反序 public class SingleLinkedListReverse { public static void main(String[] args) { Node head = ...