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. order by 多条件查询 case when

    场景:在按照条件查询后,排序按照不同的条件排序,以及同一个条件 正序和倒序排序.可以考虑使用. 遇到的排序条件:按照直播的状态,根据条件排序.直播的状态包括:直播.置顶.预告.回放.过期预告.排序条件 ...

  2. redis在windows上安装+RedisDesktopManager

    redis我就不在这里介绍了,这里直接介绍windows安装redis服务,网上有很多介绍windows版,我这边安装的是一个极简版的. redis官方下载地址:https://redis.io/do ...

  3. INSERT 语句总结

    一.基本语句 1.向指定的列中插入值(在插入批量数据时方式2优于方式1) <!--插入一条值--> INSERT INTO t1(field1,field2) VALUE(v001,v00 ...

  4. c# 设计模式 之：简单工厂、工厂方法、抽象工厂之小结、区别

    很多时候,我发现这三种设计模式难以区分,常常会张冠李戴闹了笑话.很有必要深入总结一下三种设计模式的特点.相同之处和不同之处. 1 本质 三个设计模式名字中都含有“工厂”二字,其含义是使用工厂(一个或一 ...

  5. 【转】outlook 2016 配置自动发现

    今天一部门经理换了高大上的终端,办公软件安装的是office 2016,在配置outlook的时候,懵逼了,没有exchange 选项,使用自动发现配置的时候,电脑没有加域,各种尝试,一直过不去,哎, ...

  6. 乘风破浪：LeetCode真题_012_Integer to Roman

    乘风破浪:LeetCode真题_012_Integer to Roman 一.前言 经过了前面的思维训练,我们在某些方面有了一定的提高,但是对于实际的问题,要在短时间内得到答案,还是需要我们多多的练习 ...

  7. 5 hbase-shell + hbase的java api

    本博文的主要内容有 .HBase的单机模式(1节点)安装 .HBase的单机模式(1节点)的启动 .HBase的伪分布模式(1节点)安装  .HBase的伪分布模式(1节点)的启动    .HBase ...

  8. 提升PHP速度

    PHP的优点之一是速度很快,对于一般的网站应用,可以说是已经足够了.不过如果站点的访问量很高.带宽窄或者其它的因素令服务器产生性能瓶颈的时候,你可能得想想其它的办法来进一步提高PHP的速度了.这篇文章 ...

  9. 在android工程中添加图片资源（转加）

    在Android工程中,每添加一个资源,就会在gen目录下的R.java中自动生成一个新的静态整型变量来指向这个资源.程序文件中调用资源的时候,先在R.java中找到变量名,然后根据变量值查找资源. ...

  10. python接口测试：自动保存cookies

    接口测试中遇到上一个请求返回响应包含cookie(如下图登录请求的响应结果).需将cookies保存下来,后续请求自动带入,否则会提示未登录. python requests的cookie类型是< ...