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. classic asp中使用ADODB.Command防止sql injection

    原始代码如下 Set Conn = Server.CreateObject("Adodb.Connection") Conn.Open "Provider=Microso ...

  2. Scala单例对象、伴生对象实战详解

    1.Scala单例对象 Scala单例对象是十分重要的,没有像在Java一样,有静态类.静态成员.静态方法,但是Scala提供了object对象,这个object对象类似于Java的静态类,它的成员. ...

  3. PhotoShop-CS4使用-----如何对psd进行简单切图

    一.如何快速截图 1.如果图片为psd样式   2.要用放大器放大该图,选择放大器,放大后如图 3.开始切图  以其中一个为例,选中你所要选择切的图片 4. 选中后 5.选择文件---新建   6.此 ...

  4. Cortex-M3学习日志（四） -- UART0实验

    LPC1768含有4 个符合16C550工业标准的异步串口UATR0-UART3,其中UART1具有标准的MODEM接口和RS-485/EIA-485接口模式.串口通讯接口是连接计算机.终端.通讯控制 ...

  5. [Leetcode][Python]26: Remove Duplicates from Sorted Array

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 26: Remove Duplicates from Sorted Array ...

  6. Boost::Thread使用示例 - CG-Animation - 博客频道 - CSDN.NET

    Boost::Thread使用示例 - CG-Animation - 博客频道 - CSDN.NET Boost::Thread使用示例 分类: C/C++ 2011-07-06 14:48 5926 ...

  7. JY的题目（水）

    JY的题目[问题背景]一天,JY觉得DZY智商太低下,决定和他离婚,除非DZY做出来她出的题目.DZY当然非常想和JY在一起,所以他只好又去请计算机大神WJC帮忙,WJC已经帮过他N多次忙了,不想再帮 ...

  8. Android 自动编译、打包生成apk文件 3 - 使用SDK Ant方式

      相关文章列表: < Android 自动编译.打包生成apk文件 1 - 命令行方式> < Android 自动编译.打包生成apk文件 2 - 使用原生Ant方式> &l ...

  9. html 中的name，id ，value，class，list 作用与区别

    name: 单独一个网页中,一个控件是否设置name不会影响这个网页功能的实现.当我们需要把这个控件 所关联的数据传递到数据库时,就必须设置name属性,否则这个值是没办法传到服务器保存的: id: ...

  10. JavaScript之Style属性学习

    当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式 ...