<!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. python核心编程-第四章-个人笔记

    1.所有的python对象都拥有三个特性: ①身份:每个对象都有唯一的身份标识自己,可用内建函数id()来得到.基本不会用到,不用太关心 >>> a = 2 >>> ...

  2. Train Problem I

    问题陈述: 杭州电子科技大学HANGZHOU DIANZI UNIVERSITY Online Judge Problem - 1022 问题解析: 栈(stack)的简单应用 代码详解: #incl ...

  3. Oracle EBS-SQL (INV-7):检查接收中记录数.sql

    select      msi.segment1           物料编码,       msi.description          物料描述,      sum(rs.quantity)  ...

  4. 镍钯金工艺（ENEPIG）详解

    一.镍钯金工艺(ENEPIG)与其他工艺如防氧化(OSP),镍金(ENIG)等相比有如下优点: 1.防止“黑镍问题”的发生–没有置换金攻击镍的表面做成晶粒边界腐蚀现象. 2.化学镀钯会作为阻挡层,不会 ...

  5. 可获取公网IP的网址

    由于代理检验需要,现在小站经受不住大流量测试,于是多收集了一些. http://1111.ip138.com/ic.asp, http://ip.360.cn/IPShare/info, http:/ ...

  6. 【PAT】1025. PAT Ranking (25)

    题目链接:http://pat.zju.edu.cn/contests/pat-a-practise/1025 题目描述: Programming Ability Test (PAT) is orga ...

  7. 使用Node.js快速搭建WebSocket server

    原文地址:http://my.oschina.net/yushulx/blog/309413 目录[-] 安装 服务端 客户端 参考 安装 ? 1 npm install ws 服务端 server. ...

  8. linux脚本实例之while

    写一个脚本,执行后,打印一行提示“Please input a number:",要求用户输入数值,然后打印出该数 值,然后再次要求用户输入数值.直到用户输入"end"停 ...

  9. diff函数(matlab)

    diff函数式用于求导数和差分的.无论是求导数还是差分,其原理是一样的. 这里简单介绍下其用法: 前后相邻元素之差 上下相邻行之差. 与diff(A,1,1)类似. 第三个参数为2时,则变为列差分运算 ...

  10. .NET之反射(1)

    .NET之反射 第一版 内容摘要 前言 反射 查看元数据 加载程序集 晚期绑定 方法调用 反射.晚期绑定和自定义特性的使用背景 参考资料 前言 关于反射的内容,向来是隐藏在C#高级编程类别中的大部头书 ...