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 ...
随机推荐
- 剑指offer——已知二叉树的先序和中序排列，重构二叉树
这是剑指offer中关于二叉树重构的一道题.题目原型为: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2, ...
- COB (Chip On Board) 製程介紹/簡介/注意事項 II
銀膠 (Silver glue) 如果晶圓有接地或是散熱需求時,一般都會採用[銀膠],如果沒有的話則會採用[厭氧膠].[厭氧膠]顧名思義就是阻隔它與空氣接觸後就會自然固化,不需要高溫烘烤.使用銀膠則需 ...
- springMVC+spring+mybatis整合过程中遇到的问题
今天在配置SSM整合的过程中遇到了几个错误,折腾了好久,具体如下 1.java.lang.IllegalArgumentException: Mapped Statements collection ...
- 【.NET】使用HtmlAgilityPack抓取网页数据
刚刚学习了XPath路径表达式,主要是对XML文档中的节点进行搜索,通过XPath表达式可以对XML文档中的节点位置进行快速定位和访问,html也是也是一种类似于xml的标记语言,但是语法没有那么 ...
- 适配器模式—STL中的适配器模式分析
适配器模式通常用于将一个类的接口转换为客户需要的另外一个接口,通过使用Adapter模式能够使得原本接口不兼容而不能一起工作的类可以一起工作. 这里将通过分析c++的标准模板库(STL)中的适配器来学 ...
- 请问下mtk双卡手机怎样发短信是怎样选择sim卡来发(双卡都可用的情况下)？
如题,我如今可以获取双卡状态,当仅仅有单一卡的时候可以指定sim卡进行发短信,可是双卡都可用的情况下,程序就默认使用卡1发短信了.即使指定了sim卡编号.
- Ueditor和CKeditor 两款编辑器的使用与配置
一丶ueditor 百度编辑器 1.官方文档,演示,下载地址:http://ueditor.baidu.com/website/index.html 2.百度编辑器的好:Editor是由百度web前端 ...
- 母版页中ContentPlaceHolder 控件的作用
文章转自 http://wenku.baidu.com/link?url=7sLN0ihgZQ1XfX47b_y8qbpIVjS5T75Q1xvaoyIQ6OiKIgvzyVyRccnU9e9fqo ...
- Hibernate工作流程
Hibernate创建步骤 (五大核心接口:Configuration/SessionFactory/Session/Transaction/Query) 1.新建工程,导入需要的jar包. 2.利用 ...
- IOS开发之Cocoa编程—— NSUndoManager
在Cocoa中使用NSUndoManager可以很方便的完成撤销操作.NSUndoManager会记录下修改.撤销操作的消息.这个机制使用两个NSInvocation对象栈. NSInvocation ...