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. android红米等关于读取本地文件夹图片获取路径的问题的解决

    在Android开发中,有从本地文件夹中读取图片的功能,使用一下代码打开图片选择列表: Intent intent = new Intent();   intent.setAction(Intent. ...

  2. python装饰器 高阶函数 函数闭包

    1.装饰器: 本质是函数,功能是为其他函数添加附加功能 原则:1.不修改被装饰函数的源代码 2.不修改被修饰函数的调用方式 装饰器=高阶函数+函数嵌套+闭包 #装饰器格式框架def wrap(func ...

  3. android资源的诡异问题

    最近,新开发版本,正在处于扫BUG的阶段. 发现一个比较诡异的问题,一个控件的颜色,背景色与预先设定的值,发生不一致.其他的类型的控件有同样的设置,但是现实结果正常. 今天,专门解决这个问题. 经过各 ...

  4. 创建基于 AFS 的 Docker 容器卷

    标准的 Docker 容器卷一般是位于 Docker 主机上的一个本地目录.在这样的配置下,容器必须依赖于一台特定的主机,因此使得容器的迁移和扩展变得困难.通过使用容器卷插件,能让容器访问独立于主机的 ...

  5. SQL点点滴滴_公用表表达式（CTE）递归的生成帮助数据

    本文的作者辛苦了,版权问题特声明本文出处:http://www.cnblogs.com/wy123/p/5960825.html 工作有时候会需要一些帮助数据,必须需要连续的数字,连续间隔的时间点,连 ...

  6. POP3、SMTP端口（SSL、TSL）

    POP3服务器地址: 110           995 支持SSLSMTP服务器地址: 25            465 或者 587 支持SSL(TSL) 465端口是SSL/TLS通讯协议的 ...

  7. 深入浅出SharePoint2010——请假系统无代码篇之工作流设计

    使用SharePoint Designer 2010进行设计. 主要使用的Actions如下图所示. 关于权限,考虑到严谨的权限设计,所以所有参与人员均为Read权限. 关于请假天数的计算,请假天数的 ...

  8. [学习笔记] CDQ分治&整体二分

    突然诈尸.png 这两个东西好像都是离线骗分大法... 不过其实这两个东西并不是一样的... 虽然代码长得比较像 CDQ分治 基本思想 其实CDQ分治的基本思想挺简单的... 大概思路就是长这样的: ...

  9. Alpha Scrum3

    Alpha Scrum3 牛肉面不要牛肉不要面 Alpha项目冲刺(团队作业5) 各个成员在 Alpha 阶段认领的任务 林志松:音乐网页前端页面编写,博客发布 林书浩.陈远军:界面设计.美化 吴沂章 ...

  10. IntelliJ IDEA常用设置（转）

    IntelliJ IDEA是一款非常优秀的JAVA编辑器,初学都可会对其中的一些做法感到很别扭,刚开始用的时候我也感到很不习惯,在参考了网上一些文章后在这里把我的一些经验写出来,希望初学者能快速适应它 ...