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 ...
随机推荐
- GitHub 菜鸟使用
之前有用过一次,但是一直弄不明白怎么用,今天我又试了一下,成功了,现在我就记录下来,为了以后的使用以及帮助那些跟我原先一样不会用的同学 进入正题: Step 1: 注册GitHub账号 https:/ ...
- web.config中<customErrors>节点
错误提示: “/”应用程序中的服务器错误.------------------------------------------------------------------------------- ...
- VM 映像 PowerShell 教学系列博客文章
编辑人员注释:本文章是与Microsoft Azure工程的项目经理Kay Singh共同撰写的 正如我在第一篇博客文章中所承诺的,我又回来了,为大家分步介绍如何在PowerShell中使用VM ...
- poj2140---herd sums
#include<stdio.h> #include<stdlib.h> int main() { ,i,j; scanf("%d",&n); ;i ...
- ssh login nova vm
$ sudo cat >> /usr/bin/nova-ssh << END FIRST=$1 IDX=`expr index $1 "@"`if [[ ...
- 杂记之activity之间的跳转
代码结构图 manifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xml ...
- SET QUOTED_IDENTIFIER (Transact-SQL)
使 SQL Server 遵从关于引号分隔标识符和文字字符串的 ISO 规则. 由双引号分隔的标识符可以是 Transact-SQL 保留关键字,也可以包含 Transact-SQL 标识符语法约定通 ...
- 匹配图片src正则
preg_match_all('#<img.*?src="([^"]*)"[^>]*>#i', $xstr, $match); /** * 获取图片sr ...
- WCF遇到Oracle问题
解决 选中下图中对网站和项目使用IIS….64位版
- qt检测网络连接状态【只能检测和路由器的连接，不能测试到外网的连接】
#include <QCoreApplication>#include <QDebug>#include <QTextStream>#include <QDi ...