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. Android NOTE

    一些小的点就记在这里吧…… MultiDex打包时zip错误 我遇到的是 Execution failed for task ':excelSior:packageAllDebugClassesFor ...

  2. Case when 的用法,简单Case函数

    Case when 的用法,简单Case函数 简单CASE表达式,使用表达式确定返回值. 语法: CASE search_expression WHEN expression1 THEN result ...

  3. System.DateTime的一些格式

    //2008年4月24日     System.DateTime.Now.ToString("D"); //2008-4-24     System.DateTime.Now.To ...

  4. JavaEE Tutorials (17) - Java消息服务示例

    17.1JMS示例概述23317.2编写简单的JMS应用233 17.2.1启动JMS提供者234 17.2.2创建JMS受管理对象234 17.2.3构建所有简单示例235 17.2.4发送消息23 ...

  5. oracle 建表后添加表注释及字段注释

    oracle添加表注释和表字段注释 创建Oracle数据库表时候加上注释 CREATE TABLE t1(id  varchar2(32) primary key,name VARCHAR2(8) N ...

  6. npm 常用命令

    npm install xxx 安装模块npm install xxx@1.1.1   安装1.1.1版本的xxxnpm install xxx -g 将模块安装到全局环境中.npm ls 查看安装的 ...

  7. c#读取xml文件配置文件Winform及WebForm-Demo具体解释

    我这里用Winform和WebForm两种为例说明怎样操作xml文档来作为配置文件进行读取操作. 1.新建一个类,命名为"SystemConfig.cs".代码例如以下: < ...

  8. C++重载运算符的规则

    (1)C++不允许用户自己定义新的运算符,只能对已有的C++运算符进行重载. 例如,有人觉得BASIC中用“* *”作为幂运算符很方便,也想在C++中将“* *”定义为幂运算符,用“3* *5”表示3 ...

  9. 软件介绍：搜索工具 Listary

    如今的互联网时代,搜索的重要性我想大家都是认可的.网上的知识浩如烟海,而搜索引擎是通向这些知识的入口.谷歌.百度等搜索引擎给我们带来了极大的便利,也无怪他们成长为如今的互联网巨头. 然而储存在个人硬件 ...

  10. JavaScript之面向对象学习八(继承)

    简介:继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法. 但是JS的函数并没有签名,所以在ECMASc ...