<%@ 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. js实现form表单提交,图片预览功能

    代码如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; ...

  2. Android编译错误——undefined reference to

    [错误描述] 未定义引用 提示如下:bootable/recovery/minzip/Zip.c:1122: error: undefined reference to 'selabel_lookup ...

  3. Oracle Semaphore Management in UNIX Administration

    Oracle UNIX/Linux Tips by Burleson Consulting Semaphores and Oracle 11g 信号量和数据库 Semaphores are data ...

  4. How to recover a skipped tablespace after an incomplete recovery with resetlogs? [ID 1561645.1]

    n this Document   Goal   Solution This document is being delivered to you via Oracle Support's Rapid ...

  5. JNI加载Native Library 以及 跨线程和Qt通信

    Part1 Java Native Interface-JNI-JAVA本地调用 JNI标准是Java平台的一部分, 允许Java代码和其他语言进行交互; 开始实现-> Step 1) 编写Ja ...

  6. VB中后台打开Excel文件实现代码

    某些时候需要打开Excel文件来获取或者写入数据,但又不希望跳出打开的Excel文件窗口,可以用下面的代码: Dim eb As New excel.Application, wb as excel. ...

  7. JavaScript基本概念(变量和数据类型)

    1. 变量 在局部作用域中省略var操作符可以定义全局变量,但是这么做会导致该变量难以维护,且在严格模式下会导致抛出ReferenceError错误. 2. 数据类型(js共用6种数据类型,分别是 U ...

  8. yii2 安装过程中的问题及解决方法

    一.php版本要求5.4+,如果使用wamp组合包,建议更换 二.各种模块的支持,一般只要修改php.ini文件,去掉相应模块前的注释即可. 注意,Intl extension模块的支持需要将     ...

  9. php 文件操作类

    class fileInit { /** * 创建空文件 * @param string $filename 需要创建的文件 * @return */ public function create_f ...

  10. Flex中如何通过showAllDataTips属性使鼠标移动到图表时显示所有的数据Tips的例子

    原文 http://blog.minidx.com/2008/11/10/1616.html 接下来的例子演示了Flex中如何通过showAllDataTips属性,使鼠标移动到图表时显示所有的数据T ...