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 学习的更多相关文章

  1. 使用jquery插件validate制作的表单验证案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JQuery插件的学习

    此前一直想就关于Jquery插件的开发,做一个深入的学习,由于各种原因,当然主要是自己太懒了...今天就系统分析一下Jquery插件的开发(参考了http://www.xprogrammer.com/ ...

  3. Jquery 插件初学习

    参考文章:插件开发精品教程,让你的jQuery提升一个台阶 刚刚学了一下jquery的插件插件开发,写个demo记录.练习一下.毕竟,输出才是最好的学习. 这个也不过是最基础的一个插件写法,只是,自己 ...

  4. jquery插件-validate

    1.引入js,css 下载地址:http://plugins.jquery.com/validate/ 2.设置验证规则:input的class添加以下验证属性 3.设置不符合规则的提示信息:添加da ...

  5. JQuery插件validate的Remote使用

    JQuery.validate.js 在表单验证中经常使用,初学,对于其中Remote的使用说明一下. 1. 基本解释 JQuery主要用于DOM树和CSS树的检索和后面的操作的一套方法,JQuery ...

  6. （转）jQuery插件编写学习+实例——无限滚动

    原文地址:http://www.cnblogs.com/nuller/p/3411627.html 最近自己在搞一个网站,需要用到无限滚动分页,想想工作两年有余了,竟然都没有写过插件,实在惭愧,于是简 ...

  7. jQuery插件编写学习+实例——无限滚动

    最近自己在搞一个网站,需要用到无限滚动分页,想想工作两年有余了,竟然都没有写过插件,实在惭愧,于是简单学习了下jQuery的插件编写,然后分享出来. 先说下基础知识,基本上分为两种,一种是对象级别的插 ...

  8. jQuery插件编写学习中遇见的问题--attr prop

    个人博客: https://chenjiahao.xyz 最近在学习jQuery的插件的编写,有两种方式,$.fn.extend以及$.extend,一种是作用于对象原型上,一种是直接作用于jQuer ...

  9. Jquery插件validate使用一则

    jquery.validate是一个基于jquery的非常优秀的验证框架,可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法. 主要功能有: 验证url,email,number,len ...

随机推荐

  1. __I、__O 、__IO volatile是什么？怎么用？ .

    这是ST库里面的宏定义,定义如下: #define __I volatile const /*!< defines 'read only' permissions */ #define __O ...

  2. 转：CSS布局奇淫技巧之-宽度自适应

    css这个东西,说难不难,说容易也不容易.我觉得最重要的还是经验的积累,正所谓的不积硅步,无以至千里.这一系列文章讲述几种css特殊布局的实现,也当作为自己做个备忘吧. 首先讲的是三列布局,左右两列宽 ...

  3. Coursera机器学习课程（2016 ）错题集

    Unit 4 Neural Networks (×) 分析:估计D项错误,因为神经网络在处理逻辑运算的时候是range(0,1),但是处理别的运算的时候就不是这个范围了 (√) (对) week 6 ...

  4. poj2350

    #include <stdio.h> #include <stdlib.h> int main() { ],tim,i; scanf("%d",&n ...

  5. Gdal 1.11.0 添加 Postgresql 9.1 sqlite3 支持

    OS环境Ubuntu12.04 32bit 因为公司一个功能要用到gdal 的ogr2ogr命令转换shp数据,需要能往postgis和sqlite 中插入数据. 用gdal1.11.0的源码默认安装 ...

  6. 茴香豆的第五种写法---设置ExpandableListView系统自带图标按下效果

    1 编写groupindicator_selector.xml如下: <?xml version="1.0" encoding="utf-8"?> ...

  7. 智能家居项目（2）：项目project框架的搭建

    项目管理器: Linux中的项目管理器"make"有些类似于windows中的Visual C++里的"project",它是一种控制编译或者反复编译软件的工具 ...

  8. SAN实现

    Linux 上主要有三个 iSCSI Target(基于internet scsi协议的target) 实现: Linux SCSI Target – STGT / tgt Linux-IO Targ ...

  9. JavaScript 开发经验整理

    前言 今年接触了一个B/S的项目,总结了一些JavaScript开发经验,整理些有用的内容与大家分享. 本文会持续更新... 1.实现代码访问的控制 随着项目JavaScript代码库扩大,本应被控制 ...

  10. spring mvc 返回json数据的四种方式

    一.返回ModelAndView,其中包含map集 /* * 返回ModelAndView类型的结果 * 检查用户名的合法性,如果用户已经存在,返回false,否则返回true(返回json数据,格式 ...