jquery 插件 validate 学习
jquery是十分方便的对于现在来说。
首先应该明白一个问题：
<p>
<label for="password">Password</label>
<input id="password" name="password" maxlength="24"/>
</p>
请问<input >的父元素是谁？
当然，如果看不出来，我们可以使用chrome浏览器一眼真假；
<script src="assert/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function () {
alert($("#password").parent().text());
});
在chrome 浏览器的显示居然是Password,好了，其实就应该是它。这是label标签 for 属性。为什么我会提这个呢。接下来你就明白了。
jquery 目前兼容性是很好的，所以jquery 官方也提供了很多有用的插件，今天来学习下表达插件；
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title> <link href="assert/css/milk.css" rel="stylesheet" /> <script src="assert/jquery-1.11.3.min.js"></script>
<script src="assert/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$("#signupForm").validate({
rules: {
firstname: "required",
email: {
required: true,
email:true
},
password: {
required: true,
minlength:6
},
confirm_password: {
required: true,
minlength: 6,
equalTo:"#password"
},
phone: {
required: true,
phone:true
},
},
message:{
firstname: "请输入姓名",
email: {
required: "请输入email地址",
email:"请输入正确的email地址"
},
password: {
required: "请输入密码",
minlength:jQuery.validator.format("密码不能小于{0}个字符")
},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
equalTo:"两次输入密码不一致不一致"
},
phone: {
required: "请输入phone!",
phone:"请输入正确的电话号码"
}
},
success:function(label)
{
label.html(" ").addClass("checked");
},
highlight: function (element, errorClass) {
$(element).parent().find("." + errorClass).removeClass("checked");
}
}); });
</script>
</head>
<body>
<form id="signupForm" method="get" action="">
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" /> </p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" />
</p>
<p>
<label for="phone">phone</label>
<input id="phone" maxlength="13" name="phone" />
</p>
<p>
<!--<label for="password">Password</label>-->
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<input class="submit" type="submit" value="Submit" />
</p>
</form>
</body>
</html>
这个运行后的效果图就是这样的。
首先解释下：
<link href="assert/css/milk.css" rel="stylesheet" />
这个是我自己添加的，我的学习建的文档目录如下：
你一看就明白这是验证成功和失败的样式，
input.error{border:1px solid red;}
label.error{
background:url("../image/unchecked.gif") no-repeat 0px 0px;
padding-left:16px;
padding-bottom:2px;
font-weight:bold;
color:#EA5200;
}
label.checked{
background:url("../image/checked.gif") no-repeat 0px 0px;
}
我为什会这样添加样式呢，因为jquery默认就是把错误存放在label便签里面。
知道为什么，上面的也可以自己去修改。
background:url("../image/unchecked.gif") no-repeat 0px 0px;
,
<script src="assert/jquery-1.11.3.min.js"></script>
<script src="assert/jquery.validate.min.js"></script>
这两个是必须要的引入，
rules 包含了所有的验证规则，message中是验证成功提示的信息，success：String，function ,如果success ：String，String会被认为是一个Css样式类，根据本上下文就是checked. 也可以跟一个函数，可以定义成功的字样。
hightlight：是获取高亮显示，获取文本焦点，本文中，如果输入文本时，验证出错，它将擦除原来的内容。
今天只能到这里了，如果想学习完整的教程请访问：
jquery 插件 validate 学习的更多相关文章
- 使用jquery插件validate制作的表单验证案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQuery插件的学习
此前一直想就关于Jquery插件的开发,做一个深入的学习,由于各种原因,当然主要是自己太懒了...今天就系统分析一下Jquery插件的开发(参考了http://www.xprogrammer.com/ ...
- Jquery 插件初学习
参考文章:插件开发精品教程,让你的jQuery提升一个台阶 刚刚学了一下jquery的插件插件开发,写个demo记录.练习一下.毕竟,输出才是最好的学习. 这个也不过是最基础的一个插件写法,只是,自己 ...
- jquery插件-validate
1.引入js,css 下载地址:http://plugins.jquery.com/validate/ 2.设置验证规则:input的class添加以下验证属性 3.设置不符合规则的提示信息:添加da ...
- JQuery插件validate的Remote使用
JQuery.validate.js 在表单验证中经常使用,初学,对于其中Remote的使用说明一下. 1. 基本解释 JQuery主要用于DOM树和CSS树的检索和后面的操作的一套方法,JQuery ...
- （转）jQuery插件编写学习+实例——无限滚动
原文地址:http://www.cnblogs.com/nuller/p/3411627.html 最近自己在搞一个网站,需要用到无限滚动分页,想想工作两年有余了,竟然都没有写过插件,实在惭愧,于是简 ...
- jQuery插件编写学习+实例——无限滚动
最近自己在搞一个网站,需要用到无限滚动分页,想想工作两年有余了,竟然都没有写过插件,实在惭愧,于是简单学习了下jQuery的插件编写,然后分享出来. 先说下基础知识,基本上分为两种,一种是对象级别的插 ...
- jQuery插件编写学习中遇见的问题--attr prop
个人博客: https://chenjiahao.xyz 最近在学习jQuery的插件的编写,有两种方式,$.fn.extend以及$.extend,一种是作用于对象原型上,一种是直接作用于jQuer ...
- Jquery插件validate使用一则
jquery.validate是一个基于jquery的非常优秀的验证框架,可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法. 主要功能有: 验证url,email,number,len ...
随机推荐
- cad2007 钢筋符号显示为问号
如题:cad2007 钢筋符号显示为问号 解决办法:下载Tssdeng,解压(Tssdeng.rar) 把下载到的cad大字体Tssdeng.shx文件放到autoCAD2007安装目录C:\Prog ...
- 从源码看Android中sqlite是怎么通过cursorwindow读DB的
更多内容在这里查看 https://ahangchen.gitbooks.io/windy-afternoon/content/ 执行query 执行SQLiteDatabase类中query系列函数 ...
- SQL Server一些重要视图 1
第一个: sys.indexs 每个堆与索引在它上有一行. 第二个: sys.partitions每个堆与索引的每一个分区返回一行.每一张表最多可以有1000个区. 第三个: sys. allocat ...
- erlang supervisor说明
Supervisor Behaviour是一个用来实现一个supervisor进程来监控其他子进程的模块 子进程可以是另一个supervisor,也可以是一个worker进程. worker进程一般使 ...
- delphi 7中使用idhttp抓取网页 解决假死现象
在delphi 7中使用idhttp抓取网页,造成窗口无反应的假死状态.通过搜索获得两种方法. 1.写在线程中,但是调用比较麻烦 2.使用delphi 提供的idantifreeze(必须安装indy ...
- 学习使用React Native的心得体会
首先根据官网上的介绍,安装必须的环境需求.http://reactnative.cn/docs/0.20/getting-started.html#content 下面讲一下一些常用的命令: .下载n ...
- 视频日志之android的总结与思考
四月份开始学android,并着手做这个项目,腾讯面试实习忙了半个月没有再做最终铩羽而归.做到5月30日,做了一个交差版,停下了差不多一个月,这两天再捡起完善一点. 项目是做一个视频保存和分享的网站, ...
- python <tab>自动补全
1.获取python目录[我使用的是64位ubuntu系统] [~$]python Python 2.7.3 (default, Apr 10 2013, 06:20:15) [GCC 4.6.3] ...
- WEBAPP组件化时代， Web Components
polymer ==> http://docs.polymerchina.org/ angular ==> http://www.ngnice.com/docs/guide scr ...
- bool operator==(const Array&)const; 这最后一个const 是做什么用的
字符重载也是个函数,在函数末尾加CONST 这样的函数叫常成员函数.常成员函数可以理解为是一个“只读”函数,它既不能更改数据成员的值,也不能调用那些能引起数据成员值变化的成员函数,只能调用const成 ...