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. java 反射和泛型

    反射 在计算机科学中,反射是指计算机程序在运行时(Run time)可以访问.检测和修改它本身状态或行为的一种能力.[1]用比喻来说,反射就是程序在运行的时候能够“观察”并且修改自己的行为. 要注意术 ...

  2. MyBatis基本配置和实践(三）

    一.输入映射和输出映射 mapper.xml映射文件中定义了操作数据库的sql,每条sql就是一个statement,映射文件是MyBatis的核心. 1.parameterType(输入类型) 简单 ...

  3. 面向对象进阶----->反射 getattr 和hasattr方法

    判断一个对象有没有血缘关系:isinstance() 里面写的是字类对象和父类名用来判断他们的关系 issubclass()是用来判断两个类是不是有继承的关系 ,括号内 写字类名和父类名  可以判断出 ...

  4. [mutt] Configure mutt to receive email via IMAP and send via SMTP

    “All mail clients suck. This one [mutt] just sucks less.” Michael Elkins, ca. 1995 Actually I have t ...

  5. August 29th 2017 Week 35th Tuesday

    Life is a pure flame, and we live by an invisible sun within us. 生命如纯洁的火焰,而维系这火焰的是我们内心的太阳. Burn my l ...

  6. kafka概要设计

    Kafka核心功能 即:高性能的消息发送与高性能的消息消费 下载安装包后即可启动Kafka服务器,但是此前需要首先启动Zookeeper服务器,Zookeeper是为Kafka提供协调服务的工具,Ka ...

  7. 在Android Studio2.3中配置OpenCV4Android SDK

    在Android Studio2.3中配置OpenCV4Android SDK 一,OpenCV4Android下载地址 [2.4.11]http://onhdz331f.bkt.clouddn.co ...

  8. solr集群搭建（4.10.2）

    配置环境为centos6.8 下载tomcat程序到服务器,并解压启动服务测试 [root@hadoop01 ~]# wget http://apache.claz.org/tomcat/tomcat ...

  9. 防止开放重定向，恶意篡改returnUrl

    1.防止开放重定向: /// <summary> /// 防止开放重定向 /// </summary> /// <param name="url"&g ...

  10. elasticsearch 相关

    1.对elsasticsearch index的解释,What exactly is an index in Elasticsearch ? basic definition An index is  ...