jQuery.validate.js表单验证插件的使用

效果：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>表单验证插件Validate</title>

    <script src="js/jquery-1.10.2.min.js"></script>

    <script src="js/jquery.validate.min.js"></script>

    <style>

        body {

            background-color: #000;

        }

        form {

            width: 361px;

            margin: 80px auto;

            padding: 50px;

            border: 2px solid #666;

            box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);

            background-color: #999;

            border-radius: 10px;

            box-sizing: border-box;

        }

        form>div {

            margin-bottom: 20px;

            color: #fff;

        }

        form>div>label {

            display: inline-block;

            width: 80px;

            text-align: center;

        }

        label.error {

            display: block;

            width: 100%;

            color: rgb(189, 42, 42);

            font-size: 12px;

            text-align: right;

            margin-top: 5px;

        }

        input {

            width: 170px;

            height: 20px;

            outline: none;

            background-color: #ddd;

            border: 1px solid #ddd;

            border-radius: 4px;

        }

        .submit {

            width: 170px;

            margin: 30px auto 0;

        }

        .submit input {

            background-color: #0099aa;

            color: #fff;

            border: 0;

            padding: 5px;

            height: 30px;

        }

    </style>

</head>

<body>

    <form id="signupForm" action="" method="post">

        <div>

            <label for="name">姓名：</label>

            <input type="text" id="name" name="name">

        </div>

        <div>

            <label for="email">邮箱：</label>

            <input type="email" id="email" name="email">

        </div>

        <div>

            <label for="password">密码：</label>

            <input type="password" id="password" name="password">

        </div>

        <div>

            <label for="confirm_password">确认密码：</label>

            <input type="password" id="confirm_password" name="confirm_password">

        </div>

        <div class="submit">

            <input type="submit" value="提交">

        </div>

    </form>

</body>

<script>

    $(function() {

        $("#signupForm").validate({

            rules: {

                name: "required",

                email: {

                    required: true,

                    email: true

                },

                password: {

                    required: true,

                    minlength: 5

                },

                confirm_password: {

                    required: true,

                    minlength: 5,

                    equalTo: "#password"

                }

            },

            messages: {

                name: "请输入姓名",

                email: {

                    required: "请输入Email地址",

                    email: "请输入正确的Email地址"

                },

                password: {

                    required: "请输入密码",

                    minlength: "密码不能小于5个字符"

                },

                confirm_password: {

                    required: "请输入确认密码",

                    minlength: "确认密码不能小于5个字符",

                    equalTo: "两次输入的密码不一致"

                }

            }

        });

    })

</script>

</html>

　　

jQuery.validate.js表单验证插件的更多相关文章

  1. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  2. 表单验证代码实例:jquery.validate.js表单验证插件

    jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...

  3. jquery.validate.js 表单验证简单用法

    引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...

  4. jquery.validate.js表单验证

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

  5. jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript&quo ...

  6. 【转】jquery.validate.js表单验证

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

  7. [转]jquery.validate.js表单验证

    原文地址:https://www.cnblogs.com/si-shaohua/p/3780321.html 一.用前必备官方网站:http://bassistance.de/jquery-plugi ...

  8. 转：jquery validate.js表单验证

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码代码如下: <script type="text/javascript" ...

  9. jquery.validate.js表单验证 jquery.validate.js的用法

    jquery.validate.js这个插件已经用了2年多了,是一个不可多得的表单验证最方便快捷的插件.基于jquery的小插件,基本小白一学就会上手,对于项目表单页面比较多,元素比较多的校验,该插件 ...

随机推荐

  1. The memory graph Shared by the method

    Phone类 package com.itheima_03; /* * 手机类 */ public class Phone { String brand; int price; String colo ...

  2. No rabbit death problem

    package basic.java; /** * 不死神兔问题: * 有一对兔子,从出生后第三个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,加入兔子都不死,问地二十个月的兔子对数 ...

  3. linux安装redis+RedisDesktopManager

    一:redis简介 (REmote DIctionary Server Redis远程字典服务器)       1:Redis是一个开源的使用ANSI C语言编写.完全免费开源的,遵守BSD协议.支持 ...

  4. maven(13)-安装nexus私服

     环境 nexus最新3.x版需要java1.8,2.x版需要1.7以上.我之前一直用2.x,现在偿试在centos7和window10上分别安装nexus3.x,首先确保系统中已经配好了JDK1 ...

  5. eclipse4.5(mars)环境

    官网下载页面: http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/mars/2/ ...

  6. 初识WCF2

    参照: http://blog.csdn.net/songyefei/article/details/7371571 在上一篇中,我们在一个控制台应用程序中编写了一个简单的WCF服务并承载了它.先回顾 ...

  7. INFORMATICA 开发规范

    目    录 Informatica开发规范.... 1 目    录.... 2 1        编写目的.... 4 2        ETL研发责任人界定.... 4 3        ETL ...

  8. .net core系列之《对AOP思想的理解及使用AspectCore实现自定义日志拦截》

    对于AOP这个名词,相信对于搞过MVC开发的人来说,都很熟悉,里面各种各样的Filter简直是将AOP体现到了极致. 那么什么是AOP呢? AOP(Aspect Oriented Programmin ...

  9. homebrew命令

    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

  10. Oracle shared server模式连接ORA-12519

    设置了shared server连接,dispatcher进程和shared server进程都没有问题listener.ora文件配置如下:LSNR2=  (DESCRIPTION=    (ADD ...