1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.  
  12.     <title>My JSP 'index.jsp' starting page</title>
  13.     <meta http-equiv="pragma" content="no-cache">
  14.     <meta http-equiv="cache-control" content="no-cache">
  15.     <meta http-equiv="expires" content="0">
  16.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  17.     <meta http-equiv="description" content="This is my page">
  18.     <script type="text/javascript" src="<%=path%>/js/jquery.js" ></script>
  19.     <script type="text/javascript" src="<%=path%>/js/jquery.validate.js"></script>
  20.     <script type="text/javascript">
  21.         var validator;
  22.         $(document).ready(function(){
  23.  
  24.             $.validator.addMethod("zip_code",function(value,element,parents){
  25.                 var laijie =/^[0-9]{6}$/;
  26.                 return this.optional(element)||(laijie.test(value));
  27.             },$.validator.format("{0}"));
  28.  
  29.             $("#check").click(function(){
  30.                 alert($("#validateform").valid()?"true":"false");
  31.             });
  32.             $.validator.setDefaults({
  33.                 debug:true});
  34.             validator = $("#validateform").validate({
  35.                 rules:{
  36.                     username:{
  37.                         required:true,
  38.                         rangelength:[2,10],
  39.                         zip_code:"邮编格式"
  40.                     },
  41.                     passwd:{
  42.                         required:true,
  43.                         rangelength:[2,16]
  44.                     },
  45.                     confirmpasswd:{
  46.                         required:true,
  47.                         equalTo:"#passwd"
  48.                     }
  49.                 },
  50.                 messages:{
  51.                     username:{
  52.                         required:"户名必填",
  53.                         rangelength:"用户名介于{0}和{1}之间"
  54.                     },
  55.                     passwd:{
  56.                         required:"密码为空",
  57.                         rangelength:"密码介于{0}和{1}之间"
  58.                     },
  59.                     confirmpasswd:{
  60.                         required:"确认密码为空",
  61.                         equalTo:"密码不相同"
  62.                     }
  63.                 },
  64.                 submitHandler:function(form){
  65.                     //form.submit();
  66.                     console.log($(form).serialize());
  67.                 }
  68.             });
  69.         });
  70.  
  71.     </script>
  72.   </head>
  73.  
  74.   <body>
  75.       <form action="" method="post" id="validateform" name="validateform">
  76.       <fieldset>
  77.       <legend>登陆窗口</legend>
  78.       邮编：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  79.       <input type="text" id="username" name="username"/><br>
  80.       密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  81.       <input type="password" id="passwd" name="passwd"/><br>
  82.       确认密码：
  83.       <input type="password" id="confirmpasswd" name="confirmpasswd"/><br>
  84.       <input type="button" id="check" name="check" value="检查">&nbsp;
  85.     <input type="submit" id="send" value="注册" /><br>
  86.     <div id = "resText"></div>
  87.     </fieldset>
  88.     </form>
  89.   </body>
  90. </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. Windows文件操作的API函数[转载]

    在VC中,大多数情况对文件的操作都使用系统提供的 API 函数,但有的函数我们不是很熟悉,以下提供一些文件操作 API 函数介绍: 一般文件操作 API CreateFile 打开文件 要对文件进行读 ...

  2. javascript 兼容各个浏览器的事件

  3. csss3 2D转换

    CSS3 转换 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 它如何工作? 转换是使元素改变形状.尺寸和位置的一种效果. 您可以使用 2D 或 3D 转换来转换您的元素. 浏 ...

  4. xcode中控件共有属性

    Text,title 控件上的文字 backgroung 背景图片或颜色 alignment 布局(居中,..) mode显示模式(缩放,拉伸..) drawing 隐藏控件的可见性 alpha 透明 ...

  5. Swift语法基础入门二(数组, 字典, 字符串)

    Swift语法基础入门二(数组, 字典, 字符串) 数组(有序数据的集) *格式 : [] / Int / Array() let 不可变数组 var 可变数组 注意: 不需要改变集合的时候创建不可变 ...

  6. SQL SERVER 数据类型详解（SQL Server 2008）

    数据类型类别 SQL Server 中的数据类型归纳为下列类别: 数字类型 1.精确数字 2.近似数字 3.日期和时间 字符串类型 4.非Unicode字符串 4.Unicode字符串 5.二进制字符 ...

  7. thbgm拆包【in progress】

    曾经在网上找过但是没找到过....关于东方系列bgm的格式,最初以为是个加密格式,后来听说是多个wav堆到一块儿的.再后来查到有说可以用GoldWave开的.今天试了试成功了.接下来打算研究一下,不过 ...

  8. 在 WinForm 中打开页面采用POST方式传参http。可以多个参数传递，返回json字符串

    //调用方法 Dictionary<string, string> postData = new Dictionary<string, string>(); postData. ...

  9. Bootstrap之Button.js

    查看Button.js的源代码 +function ($) { 'use strict'; // BUTTON PUBLIC CLASS DEFINITION // ================= ...

  10. 《windows核心编程系列》二谈谈ANSI和Unicode字符集 .

    http://blog.csdn.net/ithzhang/article/details/7916732转载请注明出处!! 第二章:字符和字符串处理 使用vc编程时项目-->属性-->常 ...