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. Ajax的初体验

    一.AJAX的介绍 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术. Ajax =  ...

  2. EventTarge Node Docuement Element HTMLElement 关系

    综述: 可以将其看做是依次继承的关系: Node Node A Node is an interface from which a number of DOM types inherit, and a ...

  3. leetcode summary-section II

    151 Reverse Words in a String class Solution { public: void reverseWords(string &s) { string res ...

  4. [翻译] AsyncDisplayKit

    AsyncDisplayKit AsyncDisplayKit is an iOS framework that keeps even the most complex user interfaces ...

  5. Zip压缩/解压缩（文件夹）

    #PS2.0压缩为.zip文件: $zip = "D:\audit_log\test.zip"New-Item $zip -ItemType file$shellApplicati ...

  6. C# Razor 小笔记和某些细节

    知识小结:C# 的主要 Razor 语法规则 单独一个变量直接使用 @a 的形式,无需加分号,一般是直接使用已有变量,注意在使用 html 标签时,要和 razor 表达式加一个空格. //不能有空格 ...

  7. php中的mysql_fetch_row，mysql_fetch_array，mysql_fetch_object

    1.mysql_fetch_row mysql_fetch_row,这个函数是从结果集中取一行作为枚举数据,从和指定的结果标识关联的结果集中取得一行数据并作为数组返回.每个结果的列储存在一个数组的单元 ...

  8. [转]unix/linux中的dup()系统调用

    [转]unix/linux中的dup()系统调用    在linux纷繁复杂的内核代码中,sys_dup()的代码也许称得上是最简单的之一了,但是就是这么一个简单的系统调用,却成就了unix/linu ...

  9. Windows 下安装Python包(Numpy)的错误：Unable to find vcvarsall.bat

    情景简介: Windows 环境下安装Python2.7的Numpy扩展包时提示:error: Unable to find vcvarsall.bat 经过不懈的Google/Bing,发现不仅安装 ...

  10. php截取后台登陆密码的代码

    php截取后台登陆密码的代码,很多时候黑客留了这样的代码,大家一定要注意下if($_POST[loginsubmit]!=){ //判断是否点了登陆按钮 $sb=user:.$_POST[userna ...