<!DOCTYPE html>

<!--

To change this license header, choose License Headers in Project Properties.

To change this template file, choose Tools | Templates

and open the template in the editor.

-->

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

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

            <div class="error"></div>

            <p>

                <label for="firstname">Firstname</label>

                <input id="firstname" name="firstname"/>

            </p>

            <p>

                <label for="email">E-Mail</label>

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

            </p>

            <p>

                <label for="password">Password</label>

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

            </p>

            <p>

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

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

            </p>

            <p>

                <input class="submit" type="submit" value="Submit"/>

            </p>

        </form>

        <input id="reset" type="button" value="重置表单"/>

        <script src="js/jquery-1.11.1.js"></script>

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

        <script>

            (function() {

                $.validator.setDefaults({

                    debug: true

                })

                var validator = $("#signupForm").validate({

                    rules: {//验证规则

                        firstname: "required",

                        email: {

                            required: true,

                            email: true,

//                            remote: {//远端验证

//                                url: "check-email.php",

//                                type: "post",

//                                data: {

//                                    username: function() {

//                                        return $("#username").val();

//                                    }

//                                }

//                            }

                        },

                        password: {

                            required: true,

                            minlength: 5

                        },

                        confirm_password: {

                            required: true,

                            minlength: 5,

                            equalTo: "#password"

                        }

                    },

                    messages: {//错误消息

                        firstname: "请输入姓名",

                        email: {

                            required: "请输入Email地址",

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

                        },

                        password: {

                            required: "请输入密码",

                            minlength: $.validator.format("密码不能小于{0}个字符")

                        },

                        confirm_password: {

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

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

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

                        }

                    },

//                    errorPlacement: function(error, element) {//显示错误消息的位置

//                        if (element.is(":radio"))

//                            error.appendTo(element.parent().next().next());

//                        else if (element.is(":checkbox"))

//                            error.appendTo(element.next());

//                        else

//                            error.appendTo(element.parent().next());

//                    },

//                    errorClass: "invalid", //错误消息框的类

//                    errorElement: "a", //错误消息框的元素

//                    errorContainer: "div.error", //当验证时显示或隐藏这个容器

//                    errorLabelContainer: "#signupForm div.error",//当验证时显示或隐藏这个容器

//                    wrapper: "li",//包裹住单条错误信息

//                    success: function(label) {//验证成功后的操作

//                        label.addClass("valid").text("Ok!")

//                    },

//                    onsubmit: false, //提交表单时验证

//                    onfocusout: false, //失去焦点是验证

//                    onkeyup: false,//这个好像不能用也许是我jquery版本太高了

                    submitHandler: function(form) {//处理程序

                        alert("submitted");

                        //form.submit();

                    }

                });

                // 邮政编码验证

                jQuery.validator.addMethod("isZipCode", function(value, element) {

                    var tel = /^[0-9]{6}$/;

                    return this.optional(element) || (tel.test(value));

                }, "请正确填写您的邮政编码");

                // 中文字两个字节

                jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {

                    var length = value.length;

                    for (var i = 0; i < value.length; i++) {

                        if (value.charCodeAt(i) > 127) {

                            length++;

                        }

                    }

                    return this.optional(element) || (length >= param[0] && length <= param[1]);

                }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

                //重置错误信息

                $("#reset").click(function() {

                    validator.resetForm();

                });

                //原文http://blog.csdn.net/phiberg/article/details/7344853?reload

            })();

        </script>

    </body>

</html>

jquery validation plugin 使用的更多相关文章

  1. jQuery Validation Plugin学习

    http://blog.csdn.net/violet_day/article/details/14109261 jQuery Validation Plugin Demo 一.默认校验规则 (1)r ...

  2. （转）jQuery Validation Plugin客户端表单证验插件

    jQuery Validation Plugin客户端表单验证插件 官方文档:http://jqueryvalidation.org/documentation/ 官方demo:http://jque ...

  3. 表单验证的validate.js插件---jQuery Validation Plugin

    早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...

  4. jQuery Validation Plugin

    使用方式很简单,简单测试代码如下: <html> <head> <script type="text/javascript" src="./ ...

  5. jQuery Validation remote的缓存请求

    不知大家有没有遇到,用jQuery Validation(本文讨论的版本为jQuery Validation Plugin 1.11.1)用remote方式做校验时,如果验证元素的值保持一致,进行多次 ...

  6. JQuery 表单验证--jquery validation

    jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...

  7. jQuery Validation让验证变得如此easy(一)

    一.官网下载jquery,和jquery validation plugin http://jqueryvalidation.org/ 二.引入文件 <script src="js/j ...

  8. jQuery Validation让验证变得如此容易(一)

    一.官网下载jquery,和jquery validation plugin http://jqueryvalidation.org/ 二.引入文件 <script src="js/j ...

  9. Jquery Validation 验证控件的使用说明

    转载自:http://blog.csdn.net/huang100qi/article/details/52453970,做了一些简化及修改 下载地址:https://jqueryvalidation ...

随机推荐

  1. Holding Bin-Laden Captive!（hdoj1085）代码并未完全看懂

    We all know that Bin-Laden is a notorious terrorist, and he has disappeared for a long time. But rec ...

  2. setTimeout setInterval 带参数的问题

    转载http://www.jb51.net/article/36233.htm 在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要 ...

  3. 正式学习React (七) react-router 源码分析

    学习react已经有10来天了,对于react redux react-redux 的使用流程和原理,也已经有一定的了解,在我上一篇的实战项目里,我用到了react-route,其实对它还只是 停留在 ...

  4. 微软云基础架构Hyper-scale Datacenter

    每天醒来,可能很多人的习惯都是打开手机,看看微信,刷刷朋友圈,或者看看新闻,去咖啡店,打开电脑搜索一些关键字,观看视频,电视剧--可是你有没有想过你每一次键盘的敲击,每一次微信的语音的发送,数据会流向 ...

  5. Matlab 仿真实现TI Instaspin 的Foc 逆Clarke变换和SVPWM

    一直没搞明白TI 的Instaspin的SVPWM实现原理,最后只能在Matlab里仿真看看输出波形是不是和普通的SVPWM实现输出的波形一样,用M文件实现,下面是代码: clear all; the ...

  6. CreateThread线程函数

    之前在一篇 基于TCP套接字实现的简单Demo   一文中用到了线程函数CreateThread()函数来 创建新的线程.下面以一个最简单的多线程例子来说明. C-代码如下: //最简单的创建多线程实 ...

  7. Windows Server 2012 R2超级虚拟化之七 远程桌面服务的增强

    Windows Server 2012 R2超级虚拟化之七  远程桌面服务的增强 在Windows Server 2012提供的远程桌面服务角色,使用户能够连接到虚拟桌面. RemoteApp程序.基 ...

  8. asp.net中，我们使用ashx获取数据列表，在前端使用$.ajax()解析

    一直在想在asp.net中怎么才能向在java中那样用struts那样做页面请求. 当然asp.net mvc就是类似struts的东西吧,不过还没来得及学习. 今天就用ashx来接收页面请求,并调用 ...

  9. 开发SCM系统笔记001

    使用EasyUI分页问题: 1.在分页界面没有显示声明分页属性名称,系统如何获取? EasyUI会向后台发送page\rows两个参数. 2.在配置sql参数时,parametertype与param ...

  10. OC基础11：基本的C语言特性2

    "OC基础"这个分类的文章是我在自学Stephen G.Kochan的<Objective-C程序设计第6版>过程中的笔记. 19.定义一个int类型的指针: int ...