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基础-模块
什么是模块? 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护.为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,分组的规则就是把实现了某个 ...
随机推荐
- iOS 使用AFNetWorking监听APP网络状态变化（可用于更改缓存策略、提示网络等）
前言 我们知道在APP开发过程中.监听手机当前的网络状态还是一个非经常常使用的方法,这里我来为大家接受一种使用AFNetWorking来监听当前的网络状态的方法:网络监听对程序开发的帮助有非常多:比方 ...
- 简易推荐引擎的python实现
代码地址如下:http://www.demodashi.com/demo/12913.html 主要思路 使用协同过滤的思路,从当前指定的用户过去的行为和其他用户的过去行为的相似度进行相似度评分,然后 ...
- php模板原理PHP模板引擎smarty模板原理浅谈
mvc是开发中的一个伟大的思想,使得开发代码有了更加清晰的层次,让代码分为了三层各施其职.无论是对代码的编写以及后期的阅读和维护,都提供了很大的便利. 我们在php开发中,视图层view是不允许有ph ...
- Codeforces Round #244 (Div. 2)——Checkposts
题目链接 题意: 给定n个点,每一个点有一个权值的有向图.如今须要选定一些点,使得这些点权值和最小.且满足:假设i能到达j且j能到达i,那么i.j能够仅仅选一个 分析: 强联通模板题 //使用时仅仅更 ...
- putty英文乱码---DM8168_ETV_V1.1(路视明)
配置參照http://jingyan.baidu.com/article/c74d600048ed620f6a595d12.html 注意事项: 假设出现 英文也乱码.那么就是波特率设置的问题,应该这 ...
- DMA （直接存储器访问）
DMA (直接存储器访问) 编辑 DMA(Direct Memory Access,直接内存存取) 是所有现代电脑的重要特色,它允许不同速度的硬件装置来沟通,而不需要依赖于 CPU 的大量中断负载.否 ...
- Sql常用语法总结
SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE,UPDATE,INSERT) DCL—数据控制语言(GRAN ...
- C#动态调用WCF接口(3)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.S ...
- jquery的param()
jQuery ajax - param() 方法 jQuery Ajax 参考手册 实例 序列化一个 key/value 对象: var params = { width:1900, height:1 ...
- linux下调试使用的 一些shell命令
查看文件日期:strings |grep Build gdb g++ gcc make systemctl gdb: bt s n b 1.firewalld的基本使用 启动: systemctl s ...