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_01初步
1.编程语言的发展史和发展主线 计算机语言如果你将它当做一个产品,就像我们平时用的电视机.剃须刀.电脑.手机等, 他的发展也是有规律的. 任何一个产品的发展规律都是:向着人更加容易使用.功能越来越强大 ...
- Eclipse 安装应用SVN地址
SVN插件下载地址及更新地址,你根据需要选择你需要的版本.现在最新是1.8.xLinks for 1.8.x Release:Eclipse update site URL: http://subcl ...
- MVC的优缺点
MVC的优点 大部分用过程语言比如ASP.PHP开发出来的Web应用,初始的开发模板就是混合层的数据编程.例如,直接向数据库发送请求并用HTML显示,开发速度往往比较快,但由于数据页面的分离不是很直接 ...
- Camera2/HAL3
Android Camera HAL3中拍照Capture模式下多模块间的交互与帧Result与帧数据回调https://blog.csdn.net/gzzaigcnforever/article/d ...
- zombie process
僵尸进程:子进程退出后,父进程还没有回收子进程的资源,那么这个子进程就处于僵尸状态.Q1:“资源”是些什么?Q2:父进程如何回收子进程的资源? 内核为每个终止子进程保存了一定量的信息,所以当终止进程的 ...
- XCode 4.6下XIB文件提示“...could not be opened..."的问题
最近更新了Mac系统和XCode,当我把一个以前的项目用Xcode5打开以后,再用Xcode4.6打开时,选中XXXX.xib/storyboard文件,有的文件会弹出 "The docum ...
- 搭建RocketMQ踩的坑-内存不足
环境是vmvare+ubuntu 1.http://rocketmq.apache.org/docs/quick-start/ 按照官网来启动mqnamesrv和mqbroker报错 错误如下 The ...
- MySQL设计之三范式
网上查找了一些资料,记录如下并加入自己的理解. 设计关系数据库时,遵从不同的规范要求,设计出合理的关系型数据库,这些不同的规范要求被称为不同的范式,各种范式呈递次规范,越高的范式数据库冗余越小.但是有 ...
- Cocoapod安装使用和常见问题
1.cocoapod的按照,cocoapod是运行在ruby环境下的,在ruby环境的 ,像cocoapod这样的开源项目时放在放在rubygems服务器上面的,但国内访问https://rubyge ...
- android自定义View_3——Optimizing the View
前言:现在你已经有了一个自定义的view了,并且支持手势和过度动画等属性,现在你要确认这个view 有够快的速度,为了使其在UI上不会显得迟钝或是卡停,你要保证view动画,能每秒最好有60帧. 一: ...