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 ...
随机推荐
- python 装饰器、内部函数、闭包简单理解
python内部函数.闭包共同之处在于都是以函数作为参数传递到函数,不同之处在于返回与调用有所区别. 1.python内部函数 python内部函数示例: def test(*args): def a ...
- Linux内核中的list用法和实现分析
这些天在思考知识体系的完整性,发现总是对消息队列的实现不满意,索性看看内核里面的链表实现形式,这篇文章就当做是学习的i笔记吧.. 内核代码中有很多的地方使用了list,而这个list的用法又跟我们平时 ...
- [转]iOS UIAppearance使用详解
在iOS 5以前,自定义原生控件的外观并没有原生支持,因此开发人员感觉很麻烦.开发人员经常面临的问题是修改一个控件所有实例的外观.解决这个问题的正确方法是重写一遍控件.但由于这么做非常费时,一些开发人 ...
- 【Chromium中文文档】多进程资源加载
多进程资源加载(需要更新) 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//General_Architecture ...
- OSG中的几何体
osg::Shape类 继承自osg::Object类: osg::Shape类是各种内嵌几何体的基类,不但可以用于剔除和碰撞检测,还可用于生成预定义的几何体对象: 常见的内嵌几何体包括: osg:: ...
- Oracle中强行断开用户连接的方法
版权声明:本文为博主原创文章,未经博主允许不得转载. 首先查找目标用户的当前进程,注意是serial#而不是serial,网上有的介绍漏掉了#: select sid,serial# from v$s ...
- 关于Apple Pay，一篇让你不看就会后悔的文章
编者按:本文作者康上明学为“小米生活”产品经理,在苹果Apple Pay发布后,他对该产品做了深入研究,带来这篇文章. 对于 Apple Pay ,我有几个疑问: 线下支付是一个庞大复杂的流程,当中涉 ...
- Qt 设置对话框背景（使用调色板，设置它的画刷，画刷可以是图片）
http://blog.csdn.net/ei__nino/article/details/7305234
- Delphi 的接口机制——接口操作的编译器实现过程(1)
学习COM编程技术也快有半个月了,这期间看了很多资料和别人的程序源码,也尝试了用delphi.C++.C#编写COM程序,个人感觉Delphi是最好上手的.C++的模版生成的代码太过复杂繁琐,大量使用 ...
- 今天在发布IIS站点的时候遇到了一些问题
1.HTTP 错误 500.23 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.NET 设置. 分析:一般5XX的错误都是服务器的问题,这里把应用程序池 ...