jquery中validate插件表单验证

<%@ 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>

例子所需包

时间: 2025-01-04 10:23:11

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

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

详细介绍一下Validate插件 $("#form的Id").validate({ }) 属性 规则 描述 required:true 必须输入的字段 required: "#aa:checked" 表达式的值为真,则需要验证. required: function(){}  返回为真,表示需要验证 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值. email:true 必须输入正确格式的电子邮件.

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

作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例讲解应用.it's perfect. 首先记录一些使用过程中,爱犯的错误: 1>忘记给表单form添加id属性 2>input这些表单标签必须id属性和name属性名字一样.例如:<input type="text" id="name" name=&q

jQuery.validate.js表单验证插件

jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e

jquery.validate.js表单验证

引用jquery封装好的js文件进行表单验证,提高了Web开发的效率.我写了一个验证的实例给大家展示一下. 实例中包含的验证方法还不全面,如果没有大家想要的可以通过 百度搜索关键:jquery.validate.js表单验证帮助文档来进行查阅. 引入的js文件: <script type="text/javascript" src="js/jquery-1.11.2.js"></script> <script type="te

基于Jquery Validate 的表单验证

基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Validate的表单验证前,我们先回顾一下基础纯JS的表单验证. 1.回顾基于JS的表单验证 我们先写一个简单的验证邮箱.手机号的表单,页面代码如下: 1 <form action="XXXX.action" method="post" onsubmit="r

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

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">使用validate进行表单验证时会出现error显示位置非所要求位置的现象,此时的解决方法是:</span> 1.所需要显示error message 的位置定义好无内容的div,并通过设置宽高"占位"(此时可能会用到position:absolute)

jQuery插件 -- 表单验证插件jquery.validate.js

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jquery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

兼容IE8以下浏览器input表单属性placeholder不能智能提示功能,以及使用jquery.validate.js表单验证插件的问题处理

当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.appName == "Microsoft Internet Explorer" && (navigator.appVersion.match(/7./i)=="7." || navigator.appVersion.match(/8./i)=="

jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)

1.表单验证插件--validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置.     2.表单插件--form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的option