<!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. 关于android socket出现at java.net.DatagramSocket java.net.BindException at libcore.io.IoBridge.bind(IoBridge.java:89)等waring

    经查,是socket地址重复使用的原因,将代码做如下改变即可. ctlClient = new DatagramSocket(TRANSCTLPORT); ctlClient = new Datagr ...

  2. web安全测试工具介绍---webscarab

    webscarab: 这主要是一款代理软件或许没有其它的工具能和OWASP的WebScarab如此丰富的功能相媲美了,如果非要列举一些有用的模块的话,那么他们包括HTTP代理,网络爬行.网络蜘蛛,会话 ...

  3. python操作redis--string

    #!/usr/bin/python #!coding:utf-8 """ 完成用redis模块操作string类型的数据 """ impor ...

  4. Git 介绍

    一,理解 Git 1,分布式版本控制 Git 版本控制系统的设计思想是"去中心化".传统的 CVS .SVN 等工具采用的是 C/S 架构,只有一个中心代码仓库,位于服务器端.而一 ...

  5. System.Web.Caching.Cache类 缓存 各种缓存依赖

    原文:System.Web.Caching.Cache类 缓存 各种缓存依赖 Cache类,是一个用于缓存常用信息的类.HttpRuntime.Cache以及HttpContext.Current.C ...

  6. C++利用指针突破私有成员访问限制

    C++ 面向对象的一大特性就是封装,使用不同的访问控制符来控制外接对其的访问权限.比如: 1 class A 2 { 3 public: 4 A(): i(10){} 5 void print(){ ...

  7. AIX安装SSH

    AIX 7.1   进入 https://www14.software.ibm.com/webapp/iwm/web/preLogin.do?source=aixbp 先下载需要的openssl,op ...

  8. [Leetcode][Python]54: Spiral Matrix

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 54: Spiral Matrixhttps://leetcode.com/p ...

  9. Ubuntu12.04 Jdk1.7 Tomct7.0部署配置

    jdk1.7 下载 http://download.oracle.com/otn-pub/java/jdk/7u67-b01/jdk-7u67-linux-x64.tar.gz?AuthParam=1 ...

  10. hdu 5533 Dancing Stars on Me（数学，水）

    Problem Description The sky was brushed clean by the wind and the stars were cold in a black sky. Wh ...