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 ...
随机推荐
- linux基础--chkconfig 详解
chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 使用语法:chkconfig [--ad ...
- ICON图标文件解析
icon是一种图标格式,用于系统图标.软件图标等,这种图标扩展名为*.icon.*.ico.常见的软件或windows桌面上的那些图标一般都是ICON格式的. ICON文件格式比较简单,包含文件头段. ...
- 网易云课堂_C语言程序设计进阶_第5周：链表_1逆序输出的数列
1 逆序输出的数列(10分) 题目内容: 你的程序会读入一系列的正整数,预先不知道正整数的数量,一旦读到-1,就表示输入结束.然后,按照和输入相反的顺序输出所读到的数字,不包括最后标识结束的-1. 输 ...
- [基础]RHEL6下iSCSI客户端挂载配置
本文根据鸟哥私房菜进行操作:http://linux.vbird.org/linux_enterprise/xen.php?thisscreen=800x600 一.侦测 [root@vhost3 ~ ...
- 文档onload处理程序
//第一种方式是注册onload事件处理代码, //onload事件会在页面或图像加载完成后立即发生.这意味着onload事件的执行时间是在 //document对象和document对象所关联的所有 ...
- JavaScript引用类型之Array数组的concat()和push()方法的区别
在javascript中,我们一般都只用push向数组的尾部插入新元素的,但是其实在javascript中还有另外一个方法和push一样,也是向数组尾部插入新元素的,但是他们之间却存在着一定的区别,当 ...
- 在 Visio 中录制宏
在“开发工具”选项卡上,单击“录制宏”.(如果您看不到“开发工具”选项卡,请参阅下面的“显示‘开发工具’选项卡”.) 在“宏名”框中,键入宏名称. 在“快捷键”框中,键入与 Ctrl 键一起使用可运行 ...
- hive 学习笔记精简
创建表: drop table t create table if not exists t (t string) partitioned by (log_date string) row forma ...
- SQL Server JDBC驱动中sqljdbc和sqljdbc4区别
为了支持向后兼容以及可能的升级方案,JDBC Driver 2.0 在每个安装包中都包括 2 个 JAR 类库:sqljdbc.jar 和 sqljdbc4.jar. qljdbc.jar 类库提供对 ...
- C++ try catch 捕获空指针异常，数组越界异常
#include <exception> #include <iostream> using namespace std; /************************* ...