<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="This is my page">

    <script type="text/javascript" src="<%=path%>/js/jquery.js" ></script>

    <script type="text/javascript" src="<%=path%>/js/jquery.validate.js"></script>

    <script type="text/javascript">

        var validator;

        $(document).ready(function(){

            $.validator.addMethod("zip_code",function(value,element,parents){

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

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

            },$.validator.format("{0}"));

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

                alert($("#validateform").valid()?"true":"false");

            });

            $.validator.setDefaults({

                debug:true});

            validator = $("#validateform").validate({

                rules:{

                    username:{

                        required:true,

                        rangelength:[2,10],

                        zip_code:"邮编格式"

                    },

                    passwd:{

                        required:true,

                        rangelength:[2,16]

                    },

                    confirmpasswd:{

                        required:true,

                        equalTo:"#passwd"

                    }

                },

                messages:{

                    username:{

                        required:"户名必填",

                        rangelength:"用户名介于{0}和{1}之间"

                    },

                    passwd:{

                        required:"密码为空",

                        rangelength:"密码介于{0}和{1}之间"

                    },

                    confirmpasswd:{

                        required:"确认密码为空",

                        equalTo:"密码不相同"

                    }

                },

                submitHandler:function(form){

                    //form.submit();

                    console.log($(form).serialize());

                }

            });

        });

    </script>

  </head>

  <body>

      <form action="" method="post" id="validateform" name="validateform">

      <fieldset>

      <legend>登陆窗口</legend>

      邮编：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

      <input type="text" id="username" name="username"/><br>

      密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

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

      确认密码：

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

      <input type="button" id="check" name="check" value="检查">&nbsp;

    <input type="submit" id="send" value="注册" /><br>

    <div id = "resText"></div>

    </fieldset>

    </form>

  </body>

</html>

例子所需包

jquery中validate插件表单验证的更多相关文章

  1. jQuery Validate 插件[表单验证]

    在客户端添加信息提交表单时我们经常需要做一些验证,比如验证不能为空,验证客户输入手机格式,验证客户输入email,url等的格式,我们可以通过EL表达式结合js 进行自主验证,今天总结一个JQuery ...

  2. jQuery Validate 插件[表单验证 属性介绍]

    详细介绍一下Validate插件 $("#form的Id").validate({ }) 属性 规则 描述 required:true 必须输入的字段 required: &quo ...

  3. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  4. jQuery.validate.js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  5. 基于Jquery Validate 的表单验证

    基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...

  6. 异步提交form的时候利用jQuery validate实现表单验证

    异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则    // 电话号码验证    ...

  7. 基于Bootstrap+jQuery.validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

  8. vue validate多表单验证思考 之前写过一个里外层，现在觉得不合适，应该平行的写，然后都给ret，最后判断ret 再做出反应，这样整体表单的所有验证就都报验证，然后最后提交的时候把组件内的对象合并到总的对象，再提交

    vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...

  9. 使用validate进行表单验证时土方法(appendTo)改变error显示的位置

    <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...

随机推荐

  1. OOP组合和继续的优缺点

    —— 详解继承与组合的优缺点   组合与继承都是提高代码可重用性的手段.在设计对象模型时,可以按照语义来识别类之间的组合关系和继承关系.在有些情况下,采用组合关系或者继承关系能完成同样的任务,组合和继 ...

  2. dom 删除和清除

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. MRP工作台任务下达之x组织屏蔽全部发放功能

    应用 Oracle   Manufacturing Planning 层 Level Function 函数名 Funcgtion Name MRPFPPWB-390 表单名 Form Name MR ...

  4. Spring-----1、Spring简介和Spring3.0的变化

    转载自:http://blog.csdn.net/hekewangzi/article/details/41324441

  5. php的SQL连接操作的方法

    初学php,于是一开始就在sql(具体点说是mysql)里受挫严重.于是这里记下一些方法. 首先是基本方法.基本方法现在我不用了,所以我就附一下hustoj中的部分吧 基本方法的数据库连接操作: if ...

  6. 算法竞赛中G++编译器的编译指令简单说明

    算法竞赛使用的在线判题平台在FAQ会给出提交的代码是通过什么指令进行编译的.比如hustoj给出的c++编译指令通常是: C++: g++ Main.cc -o Main -fno-asm -O2 - ...

  7. CreateMutex() 、ReleaseMutex()

    功能: CreateMutex() 用于有独占要求的程序 (在其进程运行期间不允许其他使用此端口设备的程序运行,或不允许同名程序运行). 比如运行金山词霸时,一次只能运行一个实例,当运行第二个实例时, ...

  8. javac编译原理（一）

    我们都知道,计算机只能识别二进制语言,是不能直接识别java c c++等高级语言的.将高级语言转化成计算机可以是别的二进制语言,这个过程就叫编译. 有次面试,面试官问了一道“java的编译原理是什么 ...

  9. Linux07--Shell程序设计03 通配符与正则表达式

    通配符 通配符可用于代替字符. 通常地,星号“*”匹配0个或以上的字符,问号“?”匹配1个字符. 使用情况: 1.文件和目录 在CP/M.DOS.Microsoft Windows和类Unix操作系统 ...

  10. 移动网络山寨版（OpenBTS）【2】频段的故事

    OpenBTS 系统有两个看点.一个是无线收发,尤其是频段的处理,另一个是网络系统,尤其是替代传统的基站(BTS),基站控制器(BSC),移动控制中心(MSC),以及(HLR/VLR)的另类方案. 先 ...