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. 26个jQuery使用小技巧(25)

     下面列出了一些Jquery使用技巧.比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器.预加载图片.页面样式切换.所有列等高.动态控制页面字体大小.获得鼠标指针的X值Y值.验证元 ...

  2. android 读写sd卡的权限设置

    原文:android 读写sd卡的权限设置 在Android中,要模拟SD卡,要首先使用adb的mksdcard命令来建立SD卡的镜像,如何建立,大家上网查一下吧,应该很容易找到,这里不说这个问题. ...

  3. [Drools]JAVA规则引擎 -- Drools

    Drools是一个基于Java的规则引擎,开源的,可以将复杂多变的规则从硬编码中解放出来,以规则脚本的形式存放在文件中,使得规则的变更不需要修正代码重启机器就可以立即在线上环境生效. 本文所使用的de ...

  4. /etc/security/limits.conf 配置

    <pre name="code" class="python">* soft nofile 65535 * hard nofile 65535 * ...

  5. 关于iOS7越狱的整理

    目前越狱非常的不稳定,已经白苹果第三次了.中途遇见了不少问题,去各大论坛找了下解决办法,算是搬运工. iOS7越狱过程中打开手机上的“evasi0n7”闪退,怎么办?1. 请先尝试卸载手机“evasi ...

  6. poj2262---素数（质数）的判断

    收获:一开始以为是100万的所有数字,题目要求是只要偶数,也可以分析出来,如果是给一个奇数,当我们给他大于等于3的奇数(这个数加有可能不是质数,但至少满足是奇数,至于是不是质数还要自己判断),剪出来一 ...

  7. [LeetCode][Python]Largest Number

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com'https://oj.leetcode.com/problems/largest ...

  8. IIS7.0/7.5 MVC3 实现伪静态

    routes.MapRoute(            "Default",            "{controller}/{action}.html/{id}&qu ...

  9. framework层和native层实现联网控制（iptable方式）

    最近工作中,需要开发一个功能----联网控制,这个功能其实用过root的安卓机应该都知道,禁止某个应用连接移动网络或者wifi. root后,通过su去执行iptable的命令就可以根据uid去控制应 ...

  10. WinForm 控件的布局（Dock属性）的注意点

    对于Dock属性,添加控件的顺序会影响它们停驻的方式.例如,如果你对窗体添加控件A,指示其停驻填充(Fill), 然后你对窗体添加控件B并指示其停驻顶部(Top),控件B将覆盖控件A的上部.原因就是控 ...